小程序集成字体图标库awesome与阿里iconfont,先看集成结果
字体图标集成步聚
1 将字体ttf转化为base64编码
2 新建wxss文件,拷贝生成的字体base64编码文本,别忘记添加具体图标使用样式
3 引入上步生成的wxss文件,如同web页面开发一般使用字体图标
集成awesome
访问http://fontawesome.dashgame.com/官网下载4.7版本
解压后将fonts/fontawesome-webfont.ttf文件通过https://transfonter.org/网站,转化为base64编码
下载文件解压后,将stylesheet.css文件内容复制到一个wxss文件中,例如复制至awesome-base64.wxss
然后将原始awesome压缩包中css/awesome.min.css,去除第一行@font-face定义后的内容,即从.fa样式开始复制到一个wxss文件中,例如复制至font-awesome.min.wxss
最后将你处理后的wxss文件,引入app.wxss
例如:
@import "plugins/awesome/awesome-base64.wxss";
@import "plugins/awesome/font-awesome.min.wxss";
此时,你在小程序wxml页面就可以使用了,例如
<i class="fa fa-qrcode"></i>
集成iconfont
首先登录http://iconfont.cn/ 挑选你喜欢的图标到购物车,点击下载代码按钮,压缩包中包含ttf文件与iconfont.css文件
ttf文件通过https://transfonter.org/网站,转化为base64编码然后下载,将stylesheet.css文件内容复制到一个wxss文件中
iconfont.css文件中除@font-face部分,即具体图标的使用样式复制到一个wxss文件中,同awesome处理一样,此时你就可以使用iconfont的字体图标了,例如
<i class="iconfont icon-location-solid">京城大厦</i>
说明:如果图标使用得少,使用iconfont网站按需下载是个不错的方式