uni-app使用字体图标（iconfont）

女爷i 2023-03-13 03:58 11阅读 0赞

### 离线使用字体图标 ###

1、打开[阿里巴巴字体图标网站][Link 1]，选择图标库

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70][]

2、选择想要的图标，点击购物车图标添加入库，依次添加想要的图标，完成后点击右上角的购物车图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1][]

3、点击添加至项目（如果没有新建过项目，这里会显示“添加项目”），选择（或新增）一个项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 2][]

4、点击下载至本地

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 3][]

5、解压下载的文件，复制iconfont.css至项目的static目录下

**注意：**在一些小程序或者应用上图标不显示(如钉钉)，原因可能是该小程序不是基于谷歌浏览器的webkit引擎，这时我们需要保留所有引用方式，需要将下载的eot、wooff、svg文件都添加至static中，也就是iconfont.eot，iconfont.woff，iconfont.svg等

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 4][]

6、按照以下描述处理文件

**注意：**在一些小程序或者应用上图标不显示(如钉钉)，原因可能是该小程序不是基于谷歌浏览器的webkit引擎，这时我们需要保留所有引用方式，将下载的eot、wooff、svg文件都添加至static中，也就是iconfont.eot，iconfont.woff，iconfont.svg等，并且路径需要修改为'/static/iconfont.eot'

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 5][]

7、处理完成后的文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 6][]

8、在APP.vue中引入图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 7][]

9、页面中使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 8][]

10、运行效果

![20200511095151600.png][]

[在线使用字体图标请点击此链接][Link 2]

[Link 1]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70]: /images/20230312/c9586438ba1e4e7e8f06754aa1798c78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1]: /images/20230312/5477e1cd04cf45da8944eb0b9ab80733.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 2]: /images/20230312/f7dd8c660bbd4ec1b41638001ffdf4a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 3]: /images/20230312/fec09fa67ab34bf98cf28b5497c73020.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 4]: /images/20230312/4a1f69a3a2d84eebb9a0deed0ef241df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 5]: /images/20230312/355e9c22a40442bea42348570eb3e029.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 6]: /images/20230312/3714afbd73434d8b8dcba77a4dd1f3f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 7]: /images/20230312/ac4f2ec3f04c424ba698a5e46ea2b3e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 8]: /images/20230312/8df12798f7814499a7a29ffb2ca37680.png
[20200511095151600.png]: /images/20230312/c13e2c606fa647a5ac963e73b50010b7.png
[Link 2]: https://www.cnblogs.com/cisum/p/12366203.html