📸序言
日常开发网页中，我们可能会遇到各种各样的图标，如：返回键（通常样式为 < ），提示键（通常样式为一个 小灯泡 ），目录（通常样式为一个 菜单状 ）。
这些图标其实都可以通过各大矢量图标库 实现，今天我们要讲的阿里巴巴开发的 iconfont 就是一个图标库，大大方便了图标的使用。
🖌️一、iconfont图标的介绍
光听“图标”，你可能以为，这不就是一张图吗？那用图片不是一个效果！这样想可就大错特错了❌。
实际上 iconfont 是一种字体，而这样的字体显示出来是各种各样的图标。
重点来了，既然它是字体，那么我们可以用常规修改文字的方式来修改 iconfont 图标，后面我将谈到这一点，让我们先看看怎么将 iconfont 图标添加到你的项目当中去 ↓
💫二、iconfont图标的添加
1. 进入iconfont官网并登录
官网跳转☞：iconfont官网
注册并登录。
2. 点击官方图标库
图示 ↓
3. 选择图标库
挑选你想要的图标库，这里我选择了其中的一个 ↓
4. 选择图标
选择你想要的图标，单击图标上的购物车按钮，这个过程很像在商场里购物🛒，不得不说阿里的设计师很有创意😉。
5. 将选择的图标添加到项目
（1）点击右上角的购物车按钮
（2）点击添加到项目
（3）新建项目
新建成功，自动跳转到我的项目页面，选择你自己建的项目，即可出现刚才你选择的图标。
6. 下载项目压缩包
单击这里下载整个项目的压缩包。
7. 解压压缩包，存放在网页文件夹中
- 压缩包名字为
download.zip - 压缩包中会有一个文件夹包含你在
iconfont网页中的那个项目这里建议把这个文件夹改成
iconfont，并且将这个文件夹拖到网页文件夹中，便于自己识别。
拖入网页文件夹 中。
iconfont 文件夹打开效果如下。
WARNING⚠️
这里面的文件不能动
8. 在html中包含iconfont
在 html 文件中的 head 标签内，使用以下代码，便可以通过类选择器来使用 iconfont 图标了。
<link rel="stylesheet" href="./iconfont/iconfont.css">
🎏三、使用iconfont
回到项目页面，在Font class中单击复制代码。
这个代码其实就是图标中的第二行的类名。
想使用某个图标，在标签中输入
class="iconfont 类名" 即可,在这里，我想使用第一个图标。
这个时候，网页中出现我们类中的第一个图标
效果如下
↓
💨四、修改iconfont样式
我们先使用一个类选择器定义一个 CSS 样式。
在刚才的class中加入这个类。
修改成功👍！
实际上关于文字的属性都可以用于
iconfont 图标的修改，因为 iconfont 图标本质上是文字，而不是图片❌！
⛵五、结束语
看了这么多，大家是不是对 iconfont 的简单使用有所了解了呢，希望可以帮助到你~
⭐Extra
指路作者的 CSDN 👉三角冻干咖啡的博客
