微信小程序引入字体图标(阿里iconfont)

方法总结

1 阿里iconfont官网选择自己需要的图标

阿里字体官网点击即可进入

  • 选择需要的图标

在这里插入图片描述

  • 下载至本地

在这里插入图片描述

  • 打开下载好的压缩包

2 将.ttf格式的字体文件转换为base64

转换base64点此进入
在这里插入图片描述

  • 下载转换好的文件至本地
    在这里插入图片描述
  • 打开文件夹如下图

在这里插入图片描述

3 把转换后的.css文件和原来的.css文件中的代码拼接,复制到微信小程序相应的.wxss文件中

  • 将stylesheet.css文件里面的内容全部复制到微信小程序app.wxss里面
  • 将未转换之前文件夹里面的iconfont.css里面的部分内容(如下图)复制到微信小程序app.wxss里面

在这里插入图片描述

完成以上步骤,就可以使用字体图标了


版权声明:本文为weixin_49392771原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。