评论

关于小程序引入iconfont的讨论,iconfont的链接引入

iconfont链接引入的使用 减少小程序代码包的大小

痛点:

1、iconfont 没法用链接引入,下载整个iconfont包的话size也不小;

2、全部用图片的话,size太大,还容易变形,还没法控制颜色

3、使用不方便,没法用link方式引入等等


解决方案:

1、iconfont添加项目那一套不用说了吧。。。


2、下载项目到本地 网站先别关,copy css 到项目内新建的wxss内存放,并且删掉其他文件只保留你的 iconfont.wxss

对,没错,全部删!!!iconfont.css也删


3、拷贝iconfont项目所在位置的Unicode部分的代码,然后复制到 iconfont.wxss的相应位置

(这步是关键点,请注意这一步!!!)


4、使用

wxml:

<view class="iconfont iconhuaban1"></view>



wxss:

.iconhuaban1{
  margin-right: 18rpx;
  color: #FC0D5E
  }


5、效果:



以上。

Yan

最后一次编辑于  2021-05-25  
点赞 2
收藏
评论

1 个评论

  • 七月 木槿
    七月 木槿
    2021-09-13

    这种会报错的

    2021-09-13
    赞同
    回复 1
    • 临·渊
      临·渊
      2021-11-30
      我们项目这么用的,线上和调试都是正常的
      2021-11-30
      回复
登录 后发表内容