编辑
2017-12-26
前端开发
00

目录

跟平常使用差别不大,只是需要转换一下。

步骤

  • 下载 font-awesome 字体包;
  • 打开font-awesome.css文件,将字符编码以上部分复制到app.wxss
  • 打开 Transfonter 网站,上传字体fontawesome-webfont.ttf(理论其它文件格式也可以转换,并未尝试),选择base64编码,formats只选择TTFconvert后下载;
  • Transfonter 网站下载得到的文件中有style文件,打开后将其中@font-face部分的代码复制,替换掉app.wxss中的@font-face部分;
  • 对照font-awesome.css中的字符编码内容,加入到微信小程序的app.wxss文件中,使用哪个就加哪个.
  • 然后在小程序中使用class="fa fa-user"即可,如<text class="fa fa-user"></text>

目录结构参考

E:. │ app.js │ app.json │ app.wxss │ config.js │ ├─font-awesome-4.7.0 │ ├─css │ │ font-awesome.css │ │ font-awesome.min.css │ │ │ └─fonts │ fontawesome-webfont.eot │ fontawesome-webfont.svg │ fontawesome-webfont.ttf │ fontawesome-webfont.woff │ fontawesome-webfont.woff2 │ FontAwesome.otf │ ├─pages │ └─index │ index.js │ index.wxml │ index.wxss

参考:

本文作者:青波

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!