微信小程序如何引入彩色iconfont图标？

小齐的编程之路

已于 2023-12-13 09:34:05 修改

阅读量1k

点赞数 16

文章标签：微信小程序小程序

于 2023-12-13 09:32:30 首次发布

本文链接：https://blog.youkuaiyun.com/a896532147/article/details/134963298

版权

1，在阿里云矢量图官网："iconfont-阿里巴巴矢量图标库",将你创建的项目下载到本地解压并命名为”iconfont“,在文件”iconfont“下

输入 cmd,在命令行窗口输入：

npm install -g iconfont-tools

点击”enter“等到运行结果，如果系统提示找不到npm命令，那就先安装node.js。

2，再次输入：

iconfont-tools

出现如下内容，点击enter默认即可。

3，打开iconfont文件将文件名称为”iconfont-weapp-icon.wxss“复制到小程序艮目录下，并创建文件名称为”

style"的文件夹下，

4，引用：在小程序的app.wxss文件中引入

5，在页面中使用，如：

<view class="t-icon t-icon-icon名称"></view>（去掉icon-)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小齐的编程之路

关注关注

16
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序——优雅使用彩色iconfont图标

qq_43201350的博客

10-19

764

一：安装插件 // Yarn yarn add mini-program-iconfont-cli --dev // Npm npm install mini-program-iconfont-cli --save-dev 二、生成配置文件 npx iconfont-init // 或者 npx iconfont-wechat 四、生成小程序组件 npx iconfont-wechat 五：注册iconfont组件并使用 app.json文件 // 绝对路径 { "usingCom

微信小程序使用 iconfont 彩色图标

我是写BUG的博客

10-19

467

当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。

1 条评论您还未登录，请先登录后发表或查看评论

小程序使用阿里巴巴图标iconfont

fairyier

06-26

5566

小程序开发图标使用微信小程序开发，如果想使用像web端那样的字体图标，也是可以的，但是也只是支持Unicode，不支持彩色图标，在网上也查了很多，其实也有很多都相似，这里大概也就三种方法可以供参考，base64位这个我并不知道是什么，但是好像只需要转换下就可以了，也还是很简单的，下载好所需的文件，例如iconfont的字体图标下载好的代码里面的代码格式如下3.在这个平台https://transf...

微信小程序使用iconfont彩色图标

qq_43480830的博客

10-08

1190

微信小程序使用iconfont彩色图标

微信小程序使用阿里iconfont彩色图标

Sudo

11-28

524

注意：如果出现“permission denied”等error信息，记住加上 sudo指令。4️⃣ 最终生成 iconfont-weapp-icon.wxss文件，放在项目中。5️⃣-1️⃣ app.wxss中引入wxss文件以及设置全局样式。2️⃣ 下载iconfont文件同时cd 切换到该目录。iconfont-tools // 生成小程序专用文件。icon开头的名称，都变成t-icon。5️⃣ 其他补充以及使用。5️⃣-2️⃣ 使用。

如何在小程序使用彩色的iconfont图标

陈喵喵de大大梦想⁽⁽ଘ( ˊᵕˋ )ଓ⁾⁾*

09-19

890

如何在小程序使用彩色的iconfont图标如何安装实现原理演示 https://github.com/HuaRongSAO/iconfont-tools 如何安装 npm i -g iconfont-tools cd project/asset/font_hiytajitqeu // 进入图标文件所在文件夹 iconfont-tools // 生成小程序专用文件实现原理 c...

微信小程序如何引入iconfont

浮生离梦的博客

01-21

2454

在阿里巴巴矢量库官网上将项目所需要用到的图标建立好，在我的项目中会有一个在线链接，点击复制代码，将在线链接的地址复制下来，放在浏览器的官网上打开，会出现相应的样式代码，将代码全部复制下来，如图所示：在style 文件夹下建立一个iconfont文件夹，在里面建立一个iconfont.wxss文件，将之前在浏览器复制的代码全部放在这个文件里面，如图所示：在app.wxss文件中去引入这个...

微信小程序引入iconfont彩色图标(Symbol方式)

gyueh的博客

06-24

5147

进入https://www.iconfont.cn/官网将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中打开目标项目，下载代码至本地将下载的文件进行解压，命名为iconfont Window+R打开控制面版，输入cmd—点击enter键切换到iconfont文件夹输入命令行：npm install -g iconfont-tools----点击enter键运行命令行： iconfont-tools----点击enter键出现如图所示的内容，按图示输入文件名即可打开ic.

微信小程序篇---如何使用iconfont彩色图标---Symbol类型

qq_42001842的博客

01-13

8475

前言今天在学习做微信小程序时，有需求要引用到大量iconfont彩色图标，因为我们一般用的都是iconfont单色图标，直接导入它的css文件就OK了，但是在使用彩色图标话，需要用到Symbol类型，会发现微信小程序不支持svg，后面在百度了大量文章后。。。跟着步骤一步一步来：第一步：安装插件 --- mini-program-iconfont-cli 在根目录中打开命令窗口...

微信小程序如何引入Iconfont

weixin_39553363的博客

08-05

4100

通过上述步骤，你可以在小程序中成功引入 Iconfont，以使用自定义的图标。请确保在应用图标前已经选择并添加所需的图标到 Iconfont 项目中，并按照上述步骤正确引入样式文件。打开 Iconfont 网站（https://www.iconfont.cn/）并登录账号，创建一个项目并添加所需的图标到项目中。是你在 Iconfont 中选择的图标的类名，通过添加类名即可在小程序页面中使用相应的图标。文件复制到你的小程序项目的目录中，通常是放在。在你的小程序项目的app.css样式文件中引入。

微信小程序中 iconfont 图标的使用（包括彩色图标）

weixin_42754922的博客

11-17

1000

微信小程序中 iconfont 图标的使用（包括彩色图标）

微信小程序使用IconFont彩色图标

RequesToGod的博客

03-20

737

以下命令皆在miniprogram文件夹中操作 1.安装Iconfont npm install mini-program-iconfont-cli --save-dev 2、初始化配置文件 npx iconfont-init 3、填入你阿里巴巴矢量图表项目库中的 Symbol 链接 4、生成小程序组件 npx iconfont-wechat 4、使用图标在 app.json 文件里设置使用图标组件 "usingComponents": { "iconfont": "/iconfont/ico

微信小程序使用 iconfont-阿里巴巴彩色图标库

weixin_47174945的博客

11-01

681

1.进入https://www.iconfont.cn/官网 2将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中 3打开目标项目，下载代码至本地 4将下载的文件进行压缩，命名为iconfont 5 切换到iconfont文件夹，在地址栏中输入cmd ----点击enter键 6输入命令行：npm install -g iconfont-tools----点击enter键 7运行命令行： iconfont-tools----点击enter键 8出现如图所示的内容，按图示输入文件名即可 9打

微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用

qq_45593068的博客

10-04

1570

微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用安装iconfont-tools npm i -g iconfont-tools 全局安装工具下载iconfont并使用工具在下载iconfont下 # 下载的iconfont.js目标文件下, 一直回车即可 iconfont-tools 生成iconfont-wapp文件一直回车, 默认是t-icon前缀非sass小程序用.wxss即可，sass小程序和uniapp可以用

微信小程序使用阿里图标（彩色图标）

qq_63462564的博客

03-02

134

微信小程序-使用阿里图标（彩色图标 - 博客园）

微信小程序中使用iconfont的详细教程

AI小美好

11-24

2841

本文详细介绍了微信小程序中使用iconfont的原因，优势，场景以及详细的操作步骤，便于你快速自定义字体图标。

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

老徐的博客只有干货

04-25

1956

说明最近搞微信小程序，需要添加一些图标，发现引入iconfont还是有几个步骤，就记录下来分享以下。以下配置方法支持自定义颜色的。操作步骤 1、在iconfont网站挑选自己需要的图标，添加到项目（没有的话自己创建） 2、找到我的项目，选择font class，点击【下载到本地】 3、将iconfont.woff文件转为base64格式打开：https://transfonter.org/ 点击【convert】后下载转换后文件。 4、将转换后内容添加到app.wxss 1）复制sty

微信小程序引入阿里巴巴彩色图标字体（Symbol）

最新发布

03-29

<think>好的，我需要帮助用户在微信小程序中引入并使用阿里巴巴彩色图标字体（Symbol）。根据用户提供的引用内容，我需要整理出一个清晰的步骤指南。首先，用户提到了引用[2]中的步骤，即在项目根目录运行npm安装命令行工具。我应该先指导用户安装必要的依赖，这通常是第一步。接下来，引用[3]提到在阿里图标库项目中获取Symbol的在线链接，并复制代码，这部分需要详细说明如何生成项目并复制链接。然后，根据引用[2]和引用[3]，用户需要创建配置文件iconfont.json，并填入复制的Symbol代码。这里要确保用户正确配置路径，避免出错。接着，引用[2]中提到执行命令生成组件，这应该是下一步，同时需要提醒用户可能需要的构建步骤。接下来是引入组件，引用[1]和引用[4]都提到了在app.json中全局引入组件或在页面的json文件中局部引入。需要给出两种方法的示例，让用户选择适合的方式。在使用图标的部分，引用[4]指出要去掉icon-前缀，并展示如何通过组件名称和图标名称来使用图标。需要给出具体的示例代码，确保用户清楚如何修改和使用。另外，需要注意用户可能遇到的常见问题，比如图标不显示，可能的原因包括路径错误、未构建npm、图标名称错误等。这部分需要作为注意事项提醒用户，帮助他们排查问题。最后，按照用户的要求生成相关问题，可能需要涉及其他引入方式、更新图标、特定页面使用或常见错误处理等内容。这些问题应该覆盖用户可能进一步探索的方向。整个过程中要确保步骤逻辑清晰，语言简洁，避免技术术语过多，同时准确引用提供的参考资料，确保信息正确可靠。</think>在微信小程序中使用阿里巴巴彩色图标字体（Symbol）需通过以下步骤实现： ### 一、安装依赖 1. 在小程序项目根目录打开终端，安装转换工具： ```bash npm install mini-program-iconfont-cli --save-dev ``` 此工具用于将Symbol图标转换为小程序可用格式[^2] ### 二、配置图标项目 1. 登录阿里巴巴图标库，进入需要使用的项目 2. 选择「Symbol」方式，点击「查看在线链接」复制代码[^3] 3. 在项目根目录创建`iconfont.json`配置文件： ```json { "symbol_url": "复制的Symbol链接", "save_dir": "./iconfont", "use_rpx": true, "trim_icon_prefix": "icon-", "default_icon_size": 18 } ``` ### 三、生成图标组件 1. 执行生成命令： ```bash npx iconfont-init npx iconfont-wechat ``` 2. 在微信开发者工具中执行「工具」→「构建npm」 ### 四、引入组件在`app.json`全局配置或页面json文件中添加： ```json { "usingComponents": { "iconfont": "/iconfont/iconfont" } } ``` [^1] ### 五、使用图标在wxml文件中通过组件调用： ```html <iconfont name="图标名称" size="32" color="#ff0000" /> ``` 注意图标名称需去除`icon-`前缀[^4] ### 注意事项 1. 图标更新后需重新执行生成命令 2. 图标名称严格区分大小写 3. 若图标不显示，检查： - 是否正确构建npm - Symbol链接是否有效 - 组件路径配置是否正确