uniapp使用阿里图标（入坑）

忘是亡心i 2023-02-16 04:30 23阅读 0赞

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

## 准备 ##

下载阿里图标到本地（[https://www.iconfont.cn/][https_www.iconfont.cn]），uniapp不支持symbol格式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70]

## 校验 ##

[https://transfonter.org/][https_transfonter.org]点击ADD fonts 添加下载的 iconfont.ttf 文件，配置如下图，点击convert保存，Download。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70 1]

## 配置 ##

把阿里图标的iconfont.css 复制到项目里，删除@font-face\{ \}里的代码，把下载下的stylesheet.css的文件复制到iconfont.css文件里。

## 使用 ##

main.js全局引入

import './static/common/icon/iconfont.css'//导入图标

界面使用icon

## 注意 ##

使用时要记得加前缀iconfont，不然只是一个小框框。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201014100609441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ==,size_16,color_FFFFFF,t_70#pic_center
[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020060813003318.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ==,size_16,color_FFFFFF,t_70
[https_transfonter.org]: https://transfonter.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200608130532120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ==,size_16,color_FFFFFF,t_70