阿里 Iconfont 彩色图标在wordpress网站中添加icon显示为黑白问题解决

我们建立网站时候，经常会实用到icon图标，使用阿里Iconfont彩色图标在wordpress网站中添加icon，结果显示为黑白，观赏性大大降低。

这是什么原因呢？

通常是因为未正确引入彩色图标文件。以下是具体原因及解决步骤

Fontclass模式不支持彩色图标，我们需使用Symbol模式的SVG文件。

解决步骤

1、下载Symbol模式文件‌
在阿里Iconfont项目中下载Symbol模式的incofont文件，解压后保存至本地。 ‌

1. 

2. 2、转换文件‌
   安装iconfont-tools工具（npm install -g iconfont-tools），

3. 
5. 3、进入到解压后的目录里，执行 iconfont-tools命令 ，按提示完成转换。转换后的CSS文件需复制到项目静态文件夹中。 ‌
6. 
7. 

4、把iconfont-weapp-icon.css 的https访问链接填写到wordpress 主题中(下图是以onenav主题为例)

1. ‌这样就可以正常显示彩色的icon图标了。