200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > vue-cli引入iconfont图标(阿里巴巴矢量图标库)

vue-cli引入iconfont图标(阿里巴巴矢量图标库)

时间:2023-01-03 07:13:47

相关推荐

vue-cli引入iconfont图标(阿里巴巴矢量图标库)

官网:iconfont-阿里巴巴矢量图标库

1、上官网搜索需要的图标,依次“添加入库”

2、点开右上角购物车,将所有图标“添加至项目”(已有项目/新建项目)

3、前往“资源管理”-“我的项目”,切换“Font class”模式,点击“下载至本地”

4、下载完成后,拷贝压缩包文件夹内的所有文件

5、vuecli目录src/assets下新建文件夹icons,将拷贝的文件放入其中(之后更新icons直接全部替换即可)

6、在main.js中引入iconfont.css文件

import './assets/icons/iconfont.css'

如需调整图标字号,可在iconfont.css文件内修改(每次更新都要修改一下)

.iconfont {font-family: "iconfont" !important;font-size: 12px; /* 修改图标字号 */font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

7、复制Font class类名,应用于HTML文本

<!-- 书写格式为iconfont后加Font class类名 --><i class="iconfont icon-icon-question"></i>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。