解决微信小程序引入iconfont,彩色图标变纯色

刚接触小程序,发现在引入iconfont图标,原来是彩色的图标变成了纯色
这是引入小程序内的显示
在这里插入图片描述
这是在iconfont上的图标
解决微信小程序引入iconfont,彩色图标变纯色_第1张图片
我引用的方法是在iconfont上在线生成css,将里面的css复制直接粘贴到wxss就会出现这样的情况

原来小程序对应font-class不支持多色

引用方法名 支持多色 兼容性
unicode ×
font-class × 良好
symbol

mini-program-iconfont-cli(微信小程序解决方案)
把iconfont图标批量转换成多个平台小程序的组件。不依赖字体,支持多色彩。

  1. 在工作的根目录打开cmd,输入
npm install mini-program-iconfont-cli --save-dev

2.输入命令,生成iconfont.json文件

npx iconfont-init

3.打开json文件,将symbol_url替换成iconfont项目生成的js
解决微信小程序引入iconfont,彩色图标变纯色_第2张图片

解决微信小程序引入iconfont,彩色图标变纯色_第3张图片
4.输入命令生成icon文件夹

npx iconfont-wechat

5.app.json中引入iconfont组件
解决微信小程序引入iconfont,彩色图标变纯色_第4张图片
在你需要用到彩色icon的地方(class是自己修改样式)

<iconfont name="shuben" class="icon_search"/>

就可以显现彩色icon
解决微信小程序引入iconfont,彩色图标变纯色_第5张图片
如果更新了iconfont项目,就重新生成js文件,替换iconfont.json里面的地址,再执行一次步骤4就可以了

你可能感兴趣的:(前端,小程序,js)