本文以阿里巴巴矢量图标库为例，介绍前端开发中字体图标的使用。网址为
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具
https://www.iconfont.cn/
1.进入网站，选择所需要的图标，点击类似购物车的图标将所选图标添加入库
2.点击网站右上方的购物车图标，将所选图标添加至自定义项目中
3.跳转至个人页面后，点击“下载至本地”按钮进行下载
4.解压所下载文件后，将其引入至自己的项目目录中
5.代码中通过link标签引入文件中所包含的iconfont.css文件，即可使用其中包含的图标。源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标使用</title>
<link rel="stylesheet" href="./font_3385246_azusn9fkdcl/iconfont.css">
</head>
<body>
</body>
</html>6.介绍三种使用该图标的方法，具体使用应实际情况而定。
（1）类名引入
（2）类名结合转义字符引入
（3）before或after伪类元素引入，content中写的是图标对应的Unicode码，Unicode码可按下面步骤找出
具体代码如下：
效果如下图所示：
7.可通过给元素设置字体大小及颜色调整该图标的大小和颜色。代码演示如下：
效果如下：
此外，字体相关的文件并非一定要下载，通过在线引用的方法亦可以使用。下面是方法介绍
（1）找到在线css文件的链接地址
（2）引入文件，注意补全路径
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3385246_qmhfa0c6gh.css">效果同本地引入一致
1607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
