项目新增iconfont字体图标

当现有项目需要新增字体图标时,可以参考下面的步骤:

步骤一:打开 iconfont-阿里巴巴矢量图标库 ,搜索选择需要的iconfont字体图标,添加到购物车并下载;

步骤二:下载完成后,打开文件夹中的iconfont.css后复制@font-face内容:

将复制的内容粘贴进项目的原iconfont.css文件中,并将字体图标的.icon-yunbaoleiji:before也粘贴进去(之前iconfont.css中的@font-face不要删);

步骤三:复制下载文件中的iconfont.ttf、iconfont.woff、iconfont.woff2这三个文件重命名后,复制到项目assets/icon文件夹中,类似下方图片:

(注:如果下载的是svg文件则需要在iconfont.js中添加新下载的iconfont.js中对应的<symbol></symbol>(不需要全部替换,粘贴新增svg即可),并将iconfont.SVG文件粘贴到icon文件夹中)

步骤四:正常使用iconfont即可。

  • 14
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值