小程序使用字体图标

小程序集成字体图标库awesome与阿里iconfont，先看集成结果

图0

字体图标集成步聚

1 将字体ttf转化为base64编码

2 新建wxss文件，拷贝生成的字体base64编码文本，别忘记添加具体图标使用样式

3 引入上步生成的wxss文件，如同web页面开发一般使用字体图标

集成awesome

访问http://fontawesome.dashgame.com/官网下载4.7版本

解压后将fonts/fontawesome-webfont.ttf文件通过https://transfonter.org/网站，转化为base64编码

图1

图2

下载文件解压后，将stylesheet.css文件内容复制到一个wxss文件中，例如复制至awesome-base64.wxss

图3

然后将原始awesome压缩包中css/awesome.min.css，去除第一行@font-face定义后的内容，即从.fa样式开始复制到一个wxss文件中，例如复制至font-awesome.min.wxss

图4

最后将你处理后的wxss文件，引入app.wxss

例如：

@import "plugins/awesome/awesome-base64.wxss";

@import "plugins/awesome/font-awesome.min.wxss";

此时，你在小程序wxml页面就可以使用了，例如

集成iconfont

首先登录http://iconfont.cn/ 挑选你喜欢的图标到购物车，点击下载代码按钮，压缩包中包含ttf文件与iconfont.css文件

图5

ttf文件通过https://transfonter.org/网站，转化为base64编码然后下载，将stylesheet.css文件内容复制到一个wxss文件中

iconfont.css文件中除@font-face部分，即具体图标的使用样式复制到一个wxss文件中，同awesome处理一样，此时你就可以使用iconfont的字体图标了，例如

京城大厦

说明：如果图标使用得少，使用iconfont网站按需下载是个不错的方式