网页中使用iconfont图标

如何在网页中使用iconfont图标

在页面中使用iconfont小图标

---

教程：

1.登录iconfont官网站
2.点击图标库->官方图标库
3.选择所需要的图标添加入库，右上角查看添加进来的图标，然后添加至项目，点击确定。

4.下载至本地

5.解压缩该包后，将文件夹中后缀为ttf、woff、woff2的文件复制到项目的src->assets->styles->新建一个文件夹命名为iconfont里面.

6.再把iconfont.css文件复制到刚刚的styles文件夹中
（若styles不存在则自行创建）

7.Vscode中打开iconfont.css文件修改信息：
主要是添加./iconfont/…

8.在main.js中添加 import ‘./assets/styles/iconfont.css’

import './assets/styles/iconfont.css'

9.添加完成后即可在代码中使用：
<span class=”iconfont”>(此处添加对应图标的对应代码)</span>
例如：对应代码为复制的iconfont对应代码
<span class="iconfont" >&#xe685;</span>

10.到此已经完成了，后续需要添加新的图标，添加到库之后是需要重新下载到本地哦~