概述
引入阿里的icon库；
1.所选择的字体图标下载代码包，
2.代码包里可以踢除掉demo文件，其他拷贝到vue项目里，自建一个icon文件目录 （测试发现，请慎重删除里面的文件，最好自己测试下）
3.所引用的组件页面导入iconfont.css文件 （也可以全局引入）
确保路径地址：我的是子组件引入的相对路径
<style scoped>
@import "../../../assets/icon/iconfont.css";
...
</style>全局引入。App.vue里。
<style>
//这里引入
@import "assets/icon/iconfont.css";
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #666;
}
</style>4页面：页面中添加一个i标签 class填入iconfont icon-xxx即可，
如<i class="iconfont icon-username"></i>
出错的小伙伴，先试着排查下别的报错。我一直这么用。目前没有报错。有的留言信息久远，就不回复了。
最后
以上就是明理蜡烛为你收集整理的vuejs搭建的项目如何引入图标字体的全部内容，希望文章能够帮你解决vuejs搭建的项目如何引入图标字体所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复