这篇文章主要介绍“vue文件怎么使用iconfont解析”,在日常操作中,相信很多人在vue文件怎么使用iconfont解析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue文件怎么使用iconfont解析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
vue使用iconfont
导入字体文件到assets中
main.js 导入
import '@/assets/icon/iconfont.css';
使用
注意前面一定要加iconfont,否则是个空框框
<div class="iconfont icon-label"></div>
项目中正确使用iconfont
打开 iconFont官网 选择自己喜欢的图标,并且添加购物车
点击购物车,添加至项目
下载至本地
把我们下载好的文件iconfont.css和iconfont.ttf放到项目assets文件夹下(可创建一个css文件或iconfont文件)
在main.js中引入iconfont.css样式
import './assets/iconfont/iconfont.css'
在在vue文件中引用
<i class="iconfont icon-zitigui-xianxing"></i>
假如报错,需要下载css-loader依赖包
npm install css-loader --save
到此,关于“vue文件怎么使用iconfont解析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!