微信小程序引入iconfont单色图标实例

进入https://www.iconfont.cn/官网，
搜索目标图标,图标类型为“单色图标”
将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中

打开目标项目，下载代码至本地(另外:下载Font class或 Symbol格式都可以)
将下载的文件进行解压，解压后得到如图所示文件
在小程序文件中建一个新的文件夹，命名为iconfont；
将步骤4中的iconfont.css文件放入iconfont文件夹下，并将iconfont.css文件更名为iconfont.wxss，如下：
在小程序app.wxss中引入iconfont.wxss,如图
在页面中使用
wxml部分代码如下：

<text class="iconfont icon-图标名"></text>

或者

<i class="iconfont icon-图标名"></i>

eg:<i class="iconfont icon-kache"></i>

最终效果如图
修改图标颜色
wxss部分代码如下：

<text class="iconfont iconfont-red icon-图标名" style="color: red;"></text>

效果图：

修改图标大小

<text class="iconfont iconfont-red icon-图标名" style="font-size:30px;"></text>

微信小程序引入iconfont单色图标实例相关推荐

微信小程序引入iconfont单色图标实例(Unicode方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Font class方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中 4. 在小程序项 ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
微信小程序引入iconfont彩色图标
小程序引用iconfont前两种不支持彩色,必须使用symbol,使用方法如下: 引用方法名支持多色兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序 ...
微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）
前言网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接,可惜现在阿里现在已经没有在线链接了. 解决方法然后我吧文件下载到本地尝试引用,抱歉woff文件识别不了,微信小程序是没法直接识别woff ...
微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
把 iconfont 图标批量转换成多个平台小程序的组件.不依赖字体,支持多色彩. 0 支持平台微信小程序支付宝小程序百度小程序头条小程序(字节跳动) 快手小程序 QQ小程序 1 安装插件 n ...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...
微信小程序引入阿里巴巴彩色图标字体（Symbol）
步骤一:在微信小程序开发者工具的工作的根目录打开cmd,输入 npm install mini-program-iconfont-cli --save-dev 步骤二:输入命令,生成iconfont. ...
解决微信小程序引入iconfont，彩色图标变纯色
刚接触小程序,发现在引入iconfont图标,原来是彩色的图标变成了纯色这是引入小程序内的显示这是在iconfont上的图标我引用的方法是在iconfont上在线生成css,将里面的css复制直 ...

微信小程序引入iconfont单色图标实例

微信小程序引入iconfont单色图标实例相关推荐

最新文章

热门文章