微信小程序使用Symbol类型彩色图标（symbol引用）（iconfont）

最新推荐文章于 2024-04-22 14:07:34 发布
最新推荐文章于 2024-04-22 14:07:34 发布
阅读量1.5k 收藏 8
点赞数 3
分类专栏： 微信小程序 文章标签： 小程序 图标 icon
MYJ-江启
本文链接：https://blog.csdn.net/weixin_46165569/article/details/117093099
版权

文章目录

官方使用文档

https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code

在这里插入图片描述事实证明新手直接使用很难一次成功，且微信小程序并不支持svg

经过验证的使用方法

1.安装插件 (mini-program-iconfont-cli)

必须安装好Nods.js

需要格外注意的地方

  1. 使用Npm模块
    在这里插入图片描述
    2.安装路径

必须注意
必须安装到本地项目里

在这里插入图片描述
在这里插入图片描述

// Npm
npm install mini-program-iconfont-cli --save-dev

2.生成配置文件（iconfont.json）

npx iconfont-init
在这里插入图片描述在这里插入图片描述

一定要替换
在这里插入图片描述

3.生成小程序组件

npx iconfont-wechat

在这里插入图片描述

4.注册iconfont组件并使用

注意组件路径

 "usingComponents": {
    "iconfont": "/iconfont/iconfont"
  }

在这里插入图片描述

5.使用

无需加icon-，直接使用自己起的名字就行在这里插入图片描述

其他问题

图标更新

1.先更新Symbol链接
2.更新图标组件（npx iconfont-wechat）

更改图标大小

iconfont.json文件
在这里插入图片描述再次更新图标组件（npx iconfont-wechat）

寅月十八
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序使用iconfont阿里矢量多色图标
一出好剧
01-02 2965
微信小程序端使用iconfont的多色模式
小程序中使用Symbol类型图标 | 彩色图标
hello20000913的博客
11-17 825
小程序中使用Symbol类型图标，支持彩色图标，支持微信小程序、支付宝小程序、百度小程序、头条小程序、快手小程序、QQ小程序。
如何在小程序中使用Symbol类型的iconfont
最新发布
2401_84092456的博客
04-22 441
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽。
(多项目,多个图标库)阿里图标库symbol使用手册, 微信小程序引入多个阿里矢量图标库
Supaopao的博客
06-01 459
修改小程序项目根目录iconfont.json文件，symbol_url字段类型由 string 改为 array, 复制iconfont官网你的项目的Symbol链接。
uniapp小程序使用symbol格式图标（阿里图标库）
o3o_o3o的博客
08-30 1481
uniapp小程序使用阿里图标库symbol格式的图标
解决微信小程序引入iconfont，彩色图标变纯色
liuarmyliu的博客
07-24 5913
刚接触小程序，发现在引入iconfont图标，原来是彩色的图标变成了纯色 这是引入小程序内的显示 这是在iconfont上的图标 我引用的方法是在iconfont上在线生成css，将里面的css复制直接粘贴到wxss就会出现这样的情况 原来小程序对应font-class不支持多色 引用方法名 支持多色 兼容性 unicode × 好 font-class × 良好 symbol √ 差 mini-program-iconfont-cli(微信小程序解决方案) 把iconfon
使用`mini-program-iconfont-cli`轻松管理小程序图标
gitblog_00082的博客
03-27 329
使用mini-program-iconfont-cli轻松管理小程序图标 项目地址:https://gitcode.com/iconfont-cli/mini-program-iconfont-cli 项目简介 在开发微信小程序或其他类似平台的小程序时，图标管理往往是一项繁琐的任务。mini-program-iconfont-cli 是一个强大的命令行工具，旨在简化这一过程，帮助开发者高效地管理和...
微信小程序引用iconfont图标的方法
10-17
主要介绍了微信小程序引用iconfont图标的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序里使用SVG矢量图标方法详解
10-17
在微信小程序开发过程中需要在小程序里使用SVG矢量图标,下面为大家分享2种在微信小程序中引入SVG矢量图标的方法
iconfont 微信小程序一些图标
06-15
1. iconfont 是一种基于字体的图标系统，适合在微信小程序中使用，提供高度自定义的图标样式。 2. 微信小程序的图标设计可以通过 Axure 进行模拟和预览，提升设计质量和开发效率。 3. Axure 是一个强大的原型设计...
微信小程序tabbar图标素材
04-18
2. **颜色选择**：微信小程序对 TabBar 的颜色有特定的要求，一般默认为黑色和白色，但在特定主题下可以使用自定义颜色。颜色应与背景形成对比，保证在不同背景下都能清晰可见。 3. **尺寸规范**：微信小程序规定 ...
微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
张营的技术博客
12-17 1389
把iconfont图标批量转换成多个平台小程序的组件。不依赖字体，支持多色彩。
微信小程序篇---如何使用iconfont彩色图标---Symbol类型
qq_42001842的博客
01-13 8006
前言 今天在学习做微信小程序时，有需求要引用到大量iconfont彩色图标，因为我们一般用的都是iconfont单色图标，直接导入它的css文件就OK了，但是在使用彩色图标话，需要用到Symbol类型，会发现微信小程序不支持svg，后面在百度了大量文章后。。。 跟着步骤一步一步来： 第一步：安装插件 --- mini-program-iconfont-cli 在根目录中打开命令窗口...
如何在小程序中使用Symbol类型的iconfont，初级前端开发
2401_84092832的博客
04-05 623
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可免费领取！[外链图片转存中…(img-R7RdXusH-1712331677065)][外链图片转存中…(img-B0y1DO3K-1712331677065)]
微信小程序使用阿里巴巴iconfont矢量多色图标
熟悉JS拼写的FE
10-16 857
原生微信小程序使用阿里多色iconfont图标 前言：能解决iconfont图标的只有下载png，还有使用symbol解决，但是如果都使用png会大大增加代码体积和加载速度
阿里iconfont的Symbol图标颜色无法改变
cc的博客
06-12 952
今天在vue3里面引入图标，去阿里图标库看了一下，Symbol可能是以后的趋势，就使用这个方式在项目里，中途一切顺利，就是等到改变图标颜色死活改不动，包括更改svg里面的fill属性也没反应。操作完后重新生成代码，在复制进去iconfont.js里面，这时候就可以通过更改fill属性来改变Symbol图标颜色了。到这一步图标就可以出来了，但是就是改变不了颜色，遂疯狂百度查到是iconfont生成的源代码里面。然后在阿里图标官网有个批量操作。属性默认有颜色，导致改不了。4 vue文件内使用组件。
vue-cli通过symbol引用阿里iconfont图标
yuryS的博客
08-25 2305
vue-cli通过symbol在线或本地引用iconfont项目图标。
微信小程序 使用 echarts symbol属性不能使用自定义图标
一名程序员大叔的博客
11-21 1506
下列就是echarts.js 源码，版本不同格式化后显示的 function 命名有所不同。但是全局就只有这么一个。属性自定义图标时，控制台就报错 Image is not defined。原因是因为微信小程序不支持。
uniapp微信小程序怎么修改iconfont图标大小
05-16
你可以通过以下方式修改 uniapp 微信小程序中 iconfont 图标的大小： 1. 在需要使用 iconfont 的页面中，在 `style` 标签内设置 `font-size` 属性： ```css .iconfont { font-size: 24rpx; } ``` 这里将 `font-size` 设置为 `24rpx`，你可以根据你的需求来调整大小。 2. 在需要使用 iconfont 的地方，使用 `text` 组件来渲染 iconfont，并设置 `class` 属性为你在步骤 1 中设置的类名： ```html <text class="iconfont"></text> ``` 这里使用了 `` 这个 unicode 字符来表示 iconfont 中的一个图标。你需要将它替换成你想要使用的图标对应的 unicode 字符。 通过以上步骤，你就可以在 uniapp 微信小程序中使用 iconfont 并修改其大小了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值