官网: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>
如果觉得《vue-cli引入iconfont图标(阿里巴巴矢量图标库)》对你有帮助,请点赞、收藏,并留下你的观点哦!