微信小程序 - 字体图标的使用（详细介绍）

太过爱你忘了你带给我的痛 2021-08-28 15:35 840阅读 0赞

今天，在开发一个项目的时候，想要使用字体图标，减少项目的大小，然后自己下载好自己选的图标，引入使用的时候发现一直不行，经过多次百度搜索总结之后终于可以正常使用。这里介绍两个方法分享给大家，这里重点介绍第二种方法（因为第二种方法比较麻烦）

### 第一种：直接将 iconfont.css 后缀名改为 .wxss （即：iconfont.wxss）的方式 ###

###### 第一步，选好图标并下载。先到 Iconfont-阿里巴巴矢量图标库（其他库也可以） 选好自己所需要的图标，然后将它下载下来。 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]

###### 第二步，解压文件，找到 iconfont.css 文件，将它复制到自己的项目中，将iconfont.css 改为 iconfont.wxss，然后引入到 app.wxss 就可以正常使用了。 ######

###### 最终的使用效果： ######

使用效果：  
![在这里插入图片描述][20200414160842755.png]

### 第二种：将 .ttf 后缀文件转为 base64 格式的方式 ###

###### 同样，第一步，选好图标并下载。先到 Iconfont-阿里巴巴矢量图标库（其他库也可以） 选好自己所需要的图标，然后将它下载下来。 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]

###### 第二步，将下载后的文件解压，并找到 后缀名为 ttf 文件，将它转化成base64格式（推荐网址：[https://transfonter.org/][https_transfonter.org]） ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 2]

###### 第三步，下载下来之后解压文件，找到 stylesheet.css 文件，将它打开，并全部复制到 小程序的 app.wxss 文件中 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 3]

###### 第四步，找到 最开始我们下载的图标文件夹，找到 iconfont.css 文件，将除了下面这块之外的其他内容全部复制到 app.wxss中 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 4]

###### 最终要引入（复制）的代码如下： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 5]  
这样我们就可以正常使用了。

**注意点：第三步和第四步的代码可以一起放在一个新建的wxss文件中存放，然后引入到 app.wxss 文件中**

###### 使用： ######

使用效果：  
![在这里插入图片描述][20200414160842755.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210813/9b67e7aba68b4998a5c9ac88dd9d29ad.png
[20200414160842755.png]: /images/20210813/e9333524c40043968da2e283d6a8d4d5.png
[https_transfonter.org]: https://transfonter.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200414160254111.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 2]: /images/20210813/72a12a1979e44f22b804593dc1573a86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 3]: /images/20210813/5b89d0d541904696a7fa6f5e9eb22713.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 4]: /images/20210813/bbc3a519fb5b400198263d6c61d990ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 5]: /images/20210813/8b482464b6744d798df23fc24ca9615f.png