微信小程序使用图标icon

(原文地址:https://blog.csdn.net/nongweiyilady/article/details/74244362

第一步 下载自己喜欢的图标

我用的是阿里巴巴矢量图库,在Iconfont找到自己喜欢的图标,加入购物车,如图:

加入购物车

添加至项目,如图:
image.png

下载至本地,如图:
image.png

解压,如图:
image.png

第二步 转换ttf

因为小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64,然后引用。

  1. 进入https://transfonter.org/平台
  2. 点击Add fonts,添加iconfont.ttf


    image.png

    image.png
  3. 勾上如图的选项


    image.png
  4. 点击convert


    image.png
  5. 下载


    image.png

第三步 微信小程序使用图标

  1. 我们把上一步的文件打开,如图,再把里面的stylesheet.css就是我们所需要的,我们打开stylesheet.css:


    image.png

    stylesheet.css

    可以看到font-face的url已经转换为base64格式

  2. 我们再打开第一步(第一步 下载自己喜欢的图标)中下载的文件即一开始还没转换用download.zip解压的文件,打开里面的iconfont.css


    image.png

    3.把iconfont.css里面圈红的部分(即fontface部分我们不需要啦)复制到stylesheet.css


    image.png
  3. 好啦,现在就是怎么用的问题啦,我是把stylesheet.css改了个名字和后缀(注意改后缀噢!!上次忘记了没有改成wxss还是用的css结果一直找不出bug啊摔杯子),把他放进微信小程序的公共文件里面,然后把整个文件import到页面的样式表里
    image.png

    然后就可以用啦,如图!
    image.png

    image.png

    (ok!遛人啦!)

推荐阅读更多精彩内容