当使用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,切换到文件夹的目录,转换
- 安装
iconfont-tools
工具: npm install -g iconfont-tools - 安装完成输入:iconfont-tools 回车,之后它会让你设置一些东西,按自己实际情况设置就行,不想设置就直接回车,用默认的
完毕后在之前的文件夹里会生成转换结果
打开它
6、将css复制到当前项目的静态文件夹中
7、 接下来就要去App.vue
中全局引入该文件
8、然后直接在组件里引用
这样就显示出来啦