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

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

vue项目使用Iconfont(阿里图标库)

1、操作步骤

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

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

1.png

③ 点击

2.png

④ 创建图标库

3.png

注意:

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

B. FontFamily必须写,但是内容没有严格限制(写啥都成)。

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

4.png

5.png

6.png

⑥ 下载至本地

7.png

⑦ 解压

8.png

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

⑧ 放置到vue项目

9.png

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

⑨ 在项目main.js文件导入

10.png

iconfont.css

11.png

⑩ 使用

12.png

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

13.png

2、参考

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

更多web前端知识,请查阅 HTML中文网 !!

以上就是vue.js怎么使用Iconfont图标库?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏