1、登录官网
登录https://www.iconfont.cn/,这是一个很好用的图标库。
2、选择自己需要的图标,添加到购物车
3、进入购物车,添加图标至项目
4、修改class名称和前缀
5、下载代码
6、存放到assets/iconfont中
下载下来是个压缩包,解压。主要是这些文件。为了方便管理,比如存放到assets/iconfont中,其中demo的那两个文件可以不放进去。打开demo_index,可以查看信息。
7、引用
在main.js中引入
import ‘@/assets/iconfont/iconfont.css’
8、使用
<span class="iconfont van-icon-xxx"></span> 比如<span class="iconfont van-icon-excel"></span>
注意 :
在第4步配置 Font Family为 iconfont 这里不能省略。
在第4步配置前缀 为 van-icon-
或者
<van-icon class="iconfont" class-prefix='van-icon' name='excel' color="green"></van-icon>