最近,做一个小程序项目,涉及到fontawesome字体库的使用。然而,微信小程序无法直接引用外部的字体库,经过google一下,发现一个网友提供了可行的方案,在此非常感谢原文作者贡献,让我们少走弯路。
原文链接:https://blog.csdn.net/yiyingcsdn/article/details/71215854
以下是我根据原作者的方法,自己亲自操作一遍,方法可行(文章最后有几张图片也是原文图片,忘记小程序appkey,无法登录演示截图,不过,不影响实现流程(*^▽^*))!!!
- 1、下载字体包
下载地址:http://fontawesome.dashgame.com/
- 2、将下载的字体库压缩包解压,在 fonts 文件下,找到 .ttf 文件
- 3、将找到的字体文件(.ttf),上传到 https://transfonter.org/
选择base64 编码 ,convert后下载
下载
- 4、将下载的文件解压,找到 stylesheet.css
- 5、将打开的文件,复制到小程序中的 app.wxss
- 6、在步骤【1】中 css 文件下,找到 font-awesome.css ,然后去掉内容中的 @font-face 部分,再复制到微信小程序中的 app.wxss 中,放在步骤【5】中内容的后面即可
- 7、小程序中直接引用即可显示对应字体图标
测试代码 :<text class="fa fa-camera-retro fa-lg">图标</text>