uniapp中使用iconfont-tools实现多色图标，并解决在iOS无法显示

员了个媛

于 2024-05-16 14:20:06 发布

阅读量623

点赞数 11

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_45333006/article/details/138958521

版权

uniapp中多色图标的使用

问题
iconfont-tools的使用

问题

原本项目使用了uni-icons的自定义图标的方式
链接: link。后面彩色图标需求越来越多下载时才发现多色图标不能超过40个。而且这种方式使用的多色图标在iOS上居然显示空白，然后开始在网上各种找解决方法。最终确定使用iconfont-tools工具，并实测有效，下面记录一下使用方法。

iconfont-tools的使用

图标库下载到本地

在这里插入图片描述

安装 npm install -g iconfont-tools

cmd进入第一步下载下来的文件包路径

在这里插入图片描述

执行命令 iconfont-tools

这时候会有一些问题比如输出的文件名之类的一般一路回车就行

使用

会在当前目录生成一个新的文件夹打开后复制iconfont-weapp-icon.css文件到app.vue中引入
在这里插入图片描述
页面使用 <text class="t-icon" class="t-icon-gerenzhongxin_zhanghaoguanli"></text>

搞定啦~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

员了个媛

关注关注

11
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
uniapp中使用iconfont-tools实现多色图标，并解决在iOS无法显示

uniapp中使用iconfont-tools实现多色图标，解决在ios空白
复制链接

扫一扫

iconfont-tools:iconfont，小程序彩色图标方案，小程序彩色iconfont生成工具

05-24

iconfont-tools 适用于 iconfont 彩色图标的提取特性生成原生通用组件 icon 生成夸平台可用的 iconfont-weapp.css 文件本地生产，也可以远程生成如何安装方式一：需要下载，iconfont 的字体文件包，将其解压 npm i -g iconfont-tools cd project/asset/font_hiytajitqeu // 进入图标文件所在文件夹 iconfont-tools // 生成小程序专用文件方式二：无需下载字体包，但是需要在 iconfont 生成在线链接 npm i -g iconfont-tools # 复制在线链接 //at.alicdn.com/t/font_717026_fqwb5om0rvk.js iconfont-tools --from //at.alicdn.com/t/font_717026_

uniapp-tools:uniapp工具类

05-10

2. **网络请求模块**：在uniapp中，通常使用uni.request进行网络请求。uniapp-tools可能会提供一个自定义的网络请求工具，封装了错误处理、请求参数处理、请求结果解析等功能，使请求更易于管理和调试。 3. **数据...

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

在uni-app开发的小程序中引入阿里的多色图标

最新发布

AvrilML的博客

05-06

381

4.双击打开，它会爆出在哪个目录缺少iconfont.js文件，然后把阿里图标解压出来的iconfont.js放进/Users/mac目录去。2.安装iconfont-tools,安装完成会显示出安装到了电脑的那个目录。把下面iconfont-weapp-icon.css文件拷贝到项目目录里。3，进入目录就会看到下面的iconfont-tools编译器。5，再次执行iconfont-tools,会展示执行成功。在mac目录下会生成iconfont-weapp目录，在main.js中引入。

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

qq_45593068的博客

10-04

1362

微信小程序、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可以用

uni-app小程序引入iconfont的三种方式详解（无需下载文件到项目）

qq_39961695的博客

12-31

9473

全：小程序中使用iconfont的三种方式

uniapp或者vue引入在线和离线阿里巴巴iconfont字体图标库

水月灯花的博客

11-09

3546

1、在线引入在当前页面或者uniapp项目的app.vue文件中的全局style样式，导入在线地址，然后使用text标签引入，通过设置font-size可以设置显示大小。首先将字体图标添加至购物车，然后点击购物车，随便选个项目进行添加。然后点击更新代码将其生成后点击复制，注意选择font class 复制地址为任意vue文件的style标签中，复制的地址没有https标签，注意添加使用https 然后在vue的template模板中，使用text标签引入，开头添加iconfo..

让uniapp小程序支持多色图标icon：iconfont-tools-cli

meteorites的博客

01-20

2994

让uniapp小程序支持多色图标icon：iconfont-tools-cli，yarn安装，配置，项目正常启动或打包直接执行编译；无需单独下载iconfont-tools项目本地执行处理

开发小程序如何使用iconfont彩色图标

jie_rookie的博客

11-22

607

解决开发小程序需要使用iconfont彩色图标

ios-developer-tools：每个iOS开发人员都应该知道的工具

01-31

15. **Clean Swift**: 用于清理Xcode项目的脚本，可删除未使用的资源、解决警告并优化项目结构。以上这些工具都是"ios-developer-tools"中的一部分，它们旨在提高iOS开发的效率和质量。通过学习和掌握这些工具，...

uni-app-tools:uniapp SDK

05-06

uniapp官方提供的API虽然能够满足我们绝大部分需求，但是其小部分需求需要我们自己来完善，所以为了开发者能够方便的使用uniapp官方提供的API，再此写一套工具库。请用您发财的小手给我点个Star吧。你们的鼓励就是...

Iconfont工具「Iconfont Tool」-crx插件

03-10

Iconfont的项目管理插件为 http://iconfont.cn/ 网站开发的一个插件，用来扩展已有功能。 1.4.3: 适配网页结构修改 1.4.2: 适配网页信息修改 1.4.1: 增加1:1的分辨率选项 1.4: * 增加分辨率控制(dp)，在配置文件中存储代码像素，插件界面呈现视觉像素。 1.3.3: Bugfix 1.3.2优化：界面体验优化 1.3.1优化： * 字体库更新后，增加提示“重新生成字体链接” 1.3新特性： * 默认最小化到页面底部，点击展开面板 * 提供字体文件下载按钮 * 记录最后修改的字体大小和颜色 * 提供设置页面，设置默认字体大小和颜色 * 提供重置数据库的按钮 * 优化视觉 * 优化数据保存格式支持语言:中文 (简体)

image-tools图像转换工具，可用于图像和base64的转换

01-09

【image-tools】是一款强大的图像处理...使用它，你可以轻松地在不同的应用场景中进行数据转换，提高开发效率并优化用户体验。在实际使用时，结合具体的API文档和示例代码，可以更高效地利用这个工具来满足你的需求。

随手记：uni-app中使用iconfont彩色图标

csdnyp的博客

01-31

1093

3、安装npm install -g iconfont-tools（首次使用安装）4、输入iconfont-tools会生成一个文件夹。5、打开这个文件夹，用里面的相应的css就行。2、将下载的压缩文件解压，cmd打开控制台。1、打开阿里巴巴矢量库。

阿里矢量图标的三种使用方式整理（uniapp）

热门推荐

时翎的博客

02-11

1万+

iconfont-阿里巴巴矢量图标库 web端iconfont使用引用方式： 1.unicode 引用（不支持多色，支持按字体的方式去动态调整图标大小，颜色） 2.font-class 引用（unicode使用方式的一种变种，语意明确，容易分辨是哪个icon，本质上还是使用的字体，所以多色图标还是不支持的） 3.symbol 引用（全新的使用方式，未来的主流，推荐用法。支持多色图标、支持像字体那样来调整样式）兼容性 unicode >...

如何UNI-APP中使用iconfont彩色图标

weixin_45319327的博客

07-28

2766

uni-app使用彩色iconfont图标

iconfont彩色图标

grow_的博客

06-15

1273

进入阿里巴巴矢量图标库，添加图标到项目，然后下载至本地解压后的本地文件如下，核心的是文件2.打开电脑命令行，执行以下命令，全局安装转换工具npminstall-g3.执行cd命令进入第1步解压后的文件夹后，再执行如命令，然后回车。

如何使用uniapp开发小程序使用阿里图标库

u014641260的博客

12-19

832

1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地解压后文件如下 2、下载iconfont-tools npm install -g iconfont-tools 3.在解压后的文件夹下执行命令：iconfont-tools 其中的名称等是可以修改的，这里保持一路回车保持默认，会在文件夹下生产设置的输出的文件夹名称打开生成的文件夹将里面的css文件复制到src目录下的static，生成的文件夹中的css文件、wxss文件、icon/icon

uniapp 使用iconfont

weixin_46814321的博客

08-30

540

APP.vue中：@import url('/static/iconfont-weapp-icon.css');2）在APP.vue中引入：@import '@/static/font/iconfont.css';main.js中：import './static/iconfont-weapp-icon.css'1）将需要的图标添加到购物车，添加到相应的目标项目，如下图下载。2）将下载的文件解压到项目static文件下。6）将文件引入到main.js或者APP.vue。----点击enter键执行。

iconfont-weapp-icon

07-29

回答: "iconfont-weapp-icon"是一个图标文件，可以在uniapp项目中使用。在使用之前，需要将处理好的图标文件引入到项目中，并在APP.vue文件中引入iconfont-weapp-icon.css文件。可以通过命令行工具npm install -g iconfont-tools来安装iconfont-tools，并按照提示输入文件名来使用该工具。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [uniapp 开发小程序使用iconfont图标方法](https://blog.csdn.net/weixin_39031037/article/details/117585079)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [uniapp项目引入阿里彩色iconfont图标（带图超详细解说篇）的教程](https://blog.csdn.net/weixin_45721912/article/details/117354334)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]