说明

最近搞微信小程序，需要添加一些图标，发现引入iconfont还是有几个步骤，就记录下来分享以下。
以下配置方法支持自定义颜色的。

操作步骤

1、在iconfont网站挑选自己需要的图标，添加到项目（没有的话自己创建）

2、找到我的项目，选择font class，点击【下载到本地】

3、将iconfont.woff文件转为base64格式
打开：https://transfonter.org/
点击【convert】后下载转换后文件。

4、将转换后内容添加到app.wxss
1）复制style.css内容到app.wxss

2）将iconfont.css内容（排除@font-face）复制到app.wxss

5、使用方法和效果

<span class="iconfont icon-jintian"></span>

.icon-jintian{font-size: 80rpx;color: #007cfd;
}

微信小程序引入iconfont实现添加自定义颜色图标相关推荐

微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
解决微信小程序引入iconfont，彩色图标变纯色
刚接触小程序,发现在引入iconfont图标,原来是彩色的图标变成了纯色这是引入小程序内的显示这是在iconfont上的图标我引用的方法是在iconfont上在线生成css,将里面的css复制直 ...
微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）
前言网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接,可惜现在阿里现在已经没有在线链接了. 解决方法然后我吧文件下载到本地尝试引用,抱歉woff文件识别不了,微信小程序是没法直接识别woff ...
微信小程序引入iconfont
微信小程序如何引用阿里iconfont图标库? 1.进入阿里iconfont官网 https://www.iconfont.cn/:新建一个自己的项目,导入自己需要的icon. 2.将项目里的icon ...
微信小程序引入iconfont彩色图标
小程序引用iconfont前两种不支持彩色,必须使用symbol,使用方法如下: 引用方法名支持多色兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序 ...
微信小程序引入iconfont单色图标实例
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Unicode方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Font class方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中 4. 在小程序项 ...
uni-app 微信小程序引入iconfont
uni-app 使用iconfont 阿里图标库添加需要的图标到购物车然后添加至项目下载至本地 app.vue中全局引入生成代码替换iconfont.css部分代码前面添加https: 使 ...
微信小程序引入iconfont渲染层网络层错误
替换iconfont @font-face内容解决问题

微信小程序引入iconfont实现添加自定义颜色图标

说明

操作步骤

微信小程序引入iconfont实现添加自定义颜色图标相关推荐

最新文章

热门文章