问题描述

今天用uniapp做app时，想引入一个iconfont的vip彩色图标，在阿里上选择了这款

但是引入之后却变成了黑白

查阅资料后发现是阿里更新后，Font class模式下不能彩色图标引入后彩色无法成功渲染，彩色部分会变成一片黑，整个图标呈现黑白的状态。要引入彩色的原图需要下载Symbol模式下的文件，引入SVG

解决方法

在阿里iconfont你的项目里下载Symbol模式的incofont文件到本地，然后解压文件夹

再以管理员身份打开cmd，切换到那个文件夹的目录

如果您的电脑没有安装iconfont-tools工具，那么请先安装，一会会用到，
安装完毕后输入iconfont-tools，回车，之后它会让你设置一些东西，按自己实际情况设置就行，不想设置就直接回车，用默认的。

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

打开它，将其中的CSS文件引入我们项目的目录里


于是我们已经成功引入了彩色iconfont，接下来就要去App.vue中全局引入该文件

然后直接在组件里引用

<div v-if="data.authorIsVip" class="vipLogo t-icon t-icon-VIP"></div>

可以发现图标恢复我们想要的彩色了