vue项目中引入阿里iconfont图标


0. 注册账号

https://www.iconfont.cn/

1. 图标库里面去选择自己中意的图标添加到库,如下图:

vue项目中引入阿里iconfont图标

2. 图标选的差不多了打开右侧的库,把库里面的图标添加到你的项目(没有项目就新建一个):

vue项目中引入阿里iconfont图标

3. 把整个项目下载到本地:

vue项目中引入阿里iconfont图标

4. 下载的文件解压,得到一个文件夹里面有这几个文件:

vue项目中引入阿里iconfont图标

5. vue中使用

demo_index.html 为示例文档,可以参考一下, 咱们用的是font class,Symbol据说现在还不稳定。
vue项目中引入阿里iconfont图标

5. 1 拷贝进项目,并引用

我拷贝的目录为:

vue项目中引入阿里iconfont图标
在main.js 引入css
vue项目中引入阿里iconfont图标
html中使用
vue项目中引入阿里iconfont图标

6. 效果

vue项目中引入阿里iconfont图标

相关文章: