如何在网页中使用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" ></span>
10.到此已经完成了,后续需要添加新的图标,添加到库之后是需要重新下载到本地哦~