小程序中引入字体图标和其他项目其实完全一样,网上看到一些人的文章里需要转换.ttf文件,个人亲测是不需要的,但是根据生成字体图标库的方式不同,引入方式有一些区别。

首先说一下通过http://www.iconfont.cn/阿里图标库生成的字体图标,下载后会得到如下文件:

这时我们只需要把如下文件放到你的小程序目录下,至于放在那里看个人意愿

其中iconfont.wxss对应上面的iconfont.css,只不过把文件后缀改为wxss即可

然后在app.wxss中引入iconfont.wxss,即可在pages下边的所有页面中使用字体图标了,效果如下:

 <view class='icon iconfont icon-camera_fill'></view>
 <view class='icon iconfont icon-camera'></view>

但是我使用gulp生成字体图标的时候,引入过程中却提示我iconfont.wxss中引入iconfont.eot,iconfont.ttf,iconfont.woff文件的时候不能是本地文件路径,换成线上路径后可以使用了,而之所以阿里巴巴字体图标库没有这个问题,应该是它引入.woff文件的时候用的是base64,而且我看它的iconfont.css文件做了一些兼容处理,所以兼容性更好一些。

项目中没有用到字体图标,也就没有过多深入研究,有知道解决方案的大佬欢迎评论区留言告知,多谢!

本篇文章就写到这里,如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。