uniapp-字体图标使用-解决字体图标无法正常显示（IOS显示正文形/问号）

柔光的暖阳◎ 2021-07-24 19:57 1873阅读 0赞

**前言：字体图标常用到的是阿里的iconfont，阿里的iconfont在IOS默认显示的基本是没有问题的，但是有时候图标显示不正常，比如：显示正方形、或者问号。在buttons引用的字体图标如果是固定的，不是动态修改一般是没有问题的，但是有的时候关系到字体图标的动态切换。在安卓上点击字体图标进行切换是正常的，在IOS就出现以上提到的正方形、或者问号,我尝试了百度字体的Iconfont在安卓和苹果都是正常的。**

--------------------

## **PS：在IOS上图标显示不出来的效果**   ![在这里插入图片描述][20200111112200705.jpg]   ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70] ##

## **最终效果：**   ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1] ##

**PS：百度字体Iconfont在安卓和IOS上不管是静态还是动态的图标切换都是可以正常显示的**

阿里Iconfont地址：[https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a][https_www.iconfont.cn_spm_a313x.7781069.1998910419.d4d0a486a]  
百度字体Iconfont地址：[http://fontstore.baidu.com/store\#!/myupload][http_fontstore.baidu.com_store_myupload]

--------------------

**字体图标的使用**  
PS：以下是在百度字体平台  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]

--------------------

**导出**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 3]

--------------------

**导出的压缩包-解压后的文件**  
PS：bdfont.ttf是字体文件;icon.css是字体图标代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 4]

--------------------

**uniapp引用Iconfont图标**

1.  **将字体复制到项目static目录下**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 5]

--------------------

1.  **在buttons引用，text是里面的\\后面必须加u后面的e001便是icon.css文件的.icon-draft\_box:before里面的content**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 6]  
    **icon.css文件**  
    PS：可以同时下载多个字体图标
    
    单个图标下载的icon.css  
    ![在这里插入图片描述][20200111115754444.png]  
    多个图标下载的icon.css  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 7]

[20200111112200705.jpg]: https://img-blog.csdnimg.cn/20200111112200705.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/af79d1dd80644b248e1479b06b411994.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]: /images/20210724/15f7748911e6434db615e73a3bd78b24.png
[https_www.iconfont.cn_spm_a313x.7781069.1998910419.d4d0a486a]: https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
[http_fontstore.baidu.com_store_myupload]: http://fontstore.baidu.com/store#!/myupload
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]: /images/20210724/303e25c3c2fc41efb1e0f2e5f1d2ee94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 3]: /images/20210724/64e078b661724904b28e197e51d9d928.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 4]: /images/20210724/fd4cb54d466243269e040bbc1153f541.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 5]: /images/20210724/d12c2badf32a4e6e9bb6a69b216d820a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 6]: /images/20210724/a8779794af2f4634a1c37a323f384d70.png
[20200111115754444.png]: /images/20210724/d3a92da7cef343c0a406e1a2a64f3f56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 7]: /images/20210724/fe557c6f20084be98d112f579c6b27c7.png