uni-app里引入阿里彩色矢量图标(Symbol),却发现图标显示为黑白

 当使用uniapp并尝试引入阿里iconfont的彩色图标时，发现图标显示为黑白。原因是Fontclass模式不支持彩色图标。

解决方法是下载Symbol模式的SVG文件，使用iconfont-tools进行转换，然后在项目中全局引入转换后的CSS文件，最终在组件中正确显示彩色图标。

解决步骤如下：

1、选择想要的图标，加入到购物车

 2、点击购物车，将购物车里的图标添加到项目中

 3、下载Symbol模式的incofont文件到本地

 4、解压incofont文件，打开到如以下的当前目录

5、打开cmd，切换到文件夹的目录，转换

6、将css复制到当前项目的静态文件夹中 

7、 接下来就要去App.vue中全局引入该文件

8、然后直接在组件里引用

解决步骤如下：

1、选择想要的图标，加入到购物车

 2、点击购物车，将购物车里的图标添加到项目中

然后就会跳转到这里

 

 3、下载Symbol模式的incofont文件到本地

 4、解压incofont文件，打开到如以下的当前目录

5、打开cmd，切换到文件夹的目录，转换

1. 安装iconfont-tools工具: npm install -g iconfont-tools
2. 安装完成输入：iconfont-tools  回车，之后它会让你设置一些东西，按自己实际情况设置就行，不想设置就直接回车，用默认的

 完毕后在之前的文件夹里会生成转换结果

 

 打开它

6、将css复制到当前项目的静态文件夹中 

7、 接下来就要去App.vue中全局引入该文件

8、然后直接在组件里引用

 

这样就显示出来啦