Iconfont字体图标的使用

1、进入阿里矢量图标库（https://www.iconfont.cn/），可以看到首页有许多小图标资源，也可以搜索自己需要的资源。

 

2、选择需要的图标，把鼠标悬浮上去，可以看到3个按钮：添加入库、收藏和直接下载。可以根据自己的实际情况来选择相应操作，这里选择“添加入库”，操作完可以看到图标已经添加进右上角的购物车里了，如下图：

 

3、点击右上角的购物车，可以看到如下页面：这儿也是根据自己的具体情况来进行操作，这里选择“添加至项目”（建立一个自己的图标库，将图标整合在一起，方便后续应用在自己的实际项目中）。

 

4、点击 图标管理--我的项目，进入项目页面，可以看到我们刚添加进来的图标，并且下载至本地：

下载下来的文件解压打开，目录结构如下：

5、可以双击打开demo_index.html文件，可以看到三种引用方式的优缺点和使用步骤：

5.1、Unicode 引用

5.2、font-class 引用

5.3、Symbol 引用