微信小程序如何使用fontawesome字体库?

最近,作一个小程序项目,涉及到fontawesome字体库的使用。然而,微信小程序没法直接引用外部的字体库,通过google一下,发现一个网友提供了可行的方案,在此很是感谢原文做者贡献,让咱们少走弯路
原文连接:http://www.javashuo.com/article/p-fcyzdlfp-nb.htmlcss

如下是我根据原做者的方法,本身亲自操做一遍,方法可行(文章最后有几张图片也是原文图片,忘记小程序appkey,没法登陆演示截图,不过,不影响实现流程(*^▽^*))!!!小程序

  • 一、下载字体包

下载地址:http://fontawesome.dashgame.com/微信小程序

  • 二、将下载的字体库压缩包解压,在 fonts 文件下,找到 .ttf 文件

选择base64 编码 ,convert后下载微信

下载app

  • 四、将下载的文件解压,找到 stylesheet.css

  • 五、将打开的文件,复制到小程序中的 app.wxss

  • 六、在步骤【1】中 css 文件下,找到 font-awesome.css ,而后去掉内容中的 @font-face 部分,再复制到微信小程序中的 app.wxss 中,放在步骤【5】中内容的后面便可

  • 七、小程序中直接引用便可显示对应字体图标

测试代码 :<text class="fa fa-camera-retro fa-lg">图标</text>xss

相关文章
相关标签/搜索