阿里图标库使用demo

Misnice

已于 2024-03-28 15:37:12 修改

阅读量978

点赞数

CC 4.0 BY-SA版权

文章标签： iconfont

于 2019-09-20 12:55:19 首次发布

本文链接：https://blog.youkuaiyun.com/Misnice/article/details/101055988

plugins 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在HTML文件中引入并使用Iconfont图标库。通过链接iconfont.css文件，并在HTML标签中添加iconfont类及对应图标字符，即可轻松实现图标显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在html文件中需要引入下载包中的iconfont.css文件,
然后在标签中引入iconfont类,标签内输入符号就可以了

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>阿里图标库</title>
	<link href="../iconfont/iconfont.css" rel="stylesheet">
	<style>
		*{margin:0;padding:0;}
	    .icon1{color:green;font-size:18px;}
	</style>
</head>
<body>
	<div id="select">
        时间选择<span class="iconfont icon1">&#xe6bb;</span>
	</div>
	<div class="date">
		时间<span class="iconfont" style="color:red;">&#xe6bb;</span>
	</div>	
</body>
</html>

iconfont.css文件路径如下图所示: