uni-app中使用自定义图标库

方法一:

1.进入阿里图标库下载并解压字体图标库到本地(下载Unicode格式的)
在这里插入图片描述
2.在项目根目录下创建common目录,并把iconfont.css文件放入common目录中

3.修改iconont.css里的@font-face(保留base64字体图标)

3-1:未修改前是这样
    @font-face {font-family: "iconfont";
      src: url('iconfont.eot?t=1561880249351'); /* IE9 */
      src: url('iconfont.eot?t=1561880249351#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,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
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值