vuejs搭建的项目如何引入图标字体

引入阿里的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>

出错的小伙伴,先试着排查下别的报错。我一直这么用。目前没有报错。有的留言信息久远,就不回复了。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值