vue.js怎么使用Iconfont图标库？

vue.js怎么使用Iconfont图标库？下面本篇文章给大家介绍一下在vue.js项目中使用Iconfont（阿里图标库）的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

vue项目使用Iconfont（阿里图标库）[email protected]#com搞(%代@#码网

1、操作步骤

① 登录阿里巴巴矢量图标库 https://www.iconfont.cn ，注册账号/关联账号。

② 前往“图标管理”–“我的项目”

③ 点击

④ 创建图标库

注意：

A. FontClass/Symbol前缀 很重要，如果项目中使用到ElementUI库就一定不要把前缀写成“el-icon”，会和ElementUI库的自带图标（icon）冲突，导致你图标显示不出来。

B. FontFamily必须写，但是内容没有严格限制（写啥都成）。

⑤ 选择需要的图标，添加入库

⑥ 下载至本地

⑦ 解压

红圈的文件是有用的，其他的没啥用。

⑧ 放置到vue项目

在src文件夹，新建asset文件夹，里面再新建icon文件夹，存放红圈文件。

⑨ 在项目main.js文件导入

iconfont.css

⑩ 使用

通过修改font-size，修改大小

2、参考

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

更多web前端知识，请查阅 编程笔记 ！！

以上就是vue.js怎么使用Iconfont图标库？的详细内容，更多请关注gaodaima编程笔记其它相关文章！