我们在小程序的项目开发过程中，也不可避免的需要使用到字体图标，毕竟小程序那2M代码包大小的限制，还是挺让人隐隐作痛的。相对于传统web项目中使用iconfont字体图标，微信小程序中使用iconfont字体图标还是有一定的区别。就让我们开始如何在微信小程序中使用iconfont字体图标吧。
在传统的web项目开发过程中，为了优化项目体积、削弱臃肿的图片资源，尤其是碎片图标等对服务器的压力。

为此，我们就会优先使用一些矢量字体图标文件，比如：阿里提供的免费开源图标库iconfont。它的好处就是可以像使用字体一样去渲染我们的图标，无比顺畅。

同样，我们在微信小程序的项目开发过程中，也不可避免的需要使用到字体图标，毕竟微信小程序那 2M 代码包大小的限制，还是挺让人隐隐作痛的。

对此，微信官方文章里也有优化说明：

1. 精简代码，去掉不必要的WXML结构和未使用的WXSS定义；

2. 减少在代码包中直接嵌入的资源文件；

3. 压缩图片，使用适当的图片格式；

不过，相对于第一种外，我们更应该从引入的资源入手，毕竟图片等资源是个大头啊。

所以，这个时候就需要解决如果在小程序中引入iconfont字体图标了。

相对于传统web项目中使用iconfont字体图标，微信小程序中使用iconfont字体图标还是有一定的区别。

so，下面就让我们开始如何在微信小程序中使用iconfont字体图标吧。

第一步：
分别打开 https://www.iconfont.cn/ 和 https://transfonter.org/ 这两个网站。

第二步：
将需要的图标加入项目里（推荐加入项目，而不是直接下载，是为了便于后续的项目维护和迭代开发等），操作步骤如下图所示：

第三步：
在 我发起的项目 里，选择刚才创建的项目，选择“下载至本地”，将整个项目文件下载后备用。

第四步：
将刚才下载的项目文件解压后，点击上传 iconfont.ttf 文件至 transfonter.org 网站。

一定要打开base64格式开关，一定要打开base64格式开关，一定要打开base64格式开关，重要的事情说三遍!!!

将其转换为base64格式的文件后，我们接着把转换成功后的文件下载至本地，操作步骤如下图所示：

（注：由于微信小程序不支持处理ttf、woff、eot等文件，但支持base64，所以我们需要打开base64格式开关，现将其转换为base64.）

第五步：
此时将第三步和第四步下载好的压缩包；

解压后，分别选择 iconfont.ttf 和 stylesheet.css 这两个文件；

将其打开后，选择如图所示红色区域内容，并将复制到 微信小程序根目录 下的 iconfont.wxss 文件（新建这个wxss文件或者其它wxss文件，标记为字体图标文件使用）中；

然后，在 app.wxss 里引入 iconfont.wxss 文件。

最后，在wxml里即可像传统web项目一样正常引入iconfont使用了。

注意事项：

微信小程序不支持<i>标签，所以需要使用<text>来替换<i>标签，

即：<text class='iconfont icon-xxx'></text>

最后更新于 2019-10-29 19:56:53 并被添加「微信小程序 微信小程序ICONFONT 微信小程序图标 」标签，已有 位童鞋阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

相关文章

• Excel如何通过条件格式突出显示数据
• 一个小时快速搭建微信小程序教程
• 为什么支付宝实名认证就是不能上传身份证？
• Python爬虫自动化爬取b站实时弹幕实例方法
• 保洁专用毛巾吸水抹布加厚洗碗布不易掉毛家政家务清洁洗车擦玻璃