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

原创 已于 2024-02-27 11:30:17 修改 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

于 2024-01-31 09:58:39 首次发布
本文详细描述了如何从阿里巴巴矢量库下载资源，包括解压、在控制台安装所需的工具，并使用生成的CSS文件的过程。

1、打开阿里巴巴矢量库

2、将下载的压缩文件解压，cmd打开控制台

3、安装npm install -g iconfont-tools（首次使用安装）

4、输入iconfont-tools会生成一个文件夹

5、打开这个文件夹，用里面的相应的css就行

kogmini
关注
uniapp - 解决微信小程序编译打包出现报错[plugin:uni:mp-inject] Unexpected token (x:x) at x Build failed with errors.
🏆 前端领域优质创作者
09-05 4967
uni-app，微信小程序，支付宝小程序，字节跳动抖音小程序，打包，报错，[plugin:uni:mp-inject]Unexpectedtoken(x:x)atxBuildfailedwitherrors.，项目编译打包出现错误，提示信息不全，没有问题就是报错，uniApp插件plugin:uni:mp-inject打包失败，如何解决Uniapp报错Unexpectedtoken，执行npmrunbuild:mp-weixin命令出错，都改了还是不行，依旧报错，语法错误，检查代码，
跨平台应用开发进阶(十二) ：uni-app 实现应用桌面图标角标提示及应用跳转_uniapp桌面角标
2401_84433570的博客
05-10 1596
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。“badge_class”: “com.test.badge.MainActivity”, //默认为 APP 的主 Activity。“badge_class”: “com.test.badge.MainActivity”, //默认为 APP 的主 Activity。“badge_add_num”: 1, //角标增加值，取值范围1-99。“badge_add_num”: 1, //角标增加值，取值范围1-99。
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_
uni-app中使用iconfont彩色图标
java小白
08-29 2048
大家好，今天我们来学习一下uni-app中使用iconfont彩色图标，好好看，好好学，超详细的。
uniapp 使用 iconfont 彩色图标
m0_71513265的博客
07-02 1057
uniapp，使用 iconfont 图标，黑白、彩色显示
微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用
qq_45593068的博客
10-04 1678
微信小程序、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可以用
uniapp引入彩色的字体图标的教程
Lulu_yo的博客
12-26 1001
1、阿里巴巴矢量图标官网，将自己喜欢的图标加入购物车，然后下载图标到本地2、在uniapp下的static，新建一个iconfont文件夹，将下载的压缩包解压图标到static的iconfont下面。3.进入文件夹下，按照以下步骤：4.命令窗口输入如图内容5、之后会发现多了这个文件6、然后就可以使用它了，一定要按照标横线这样的格式去使用：注意：1、一定要按照它的样式： t-icon t-icon-XXXXX2、通过height 和 width 改变它的图标大小3、需要加。
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8531
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
一站式解决方案：uni-app条件编译及多环境配置，appid动态修改攻略！
weixin_45734165的博客
07-16 2731
在企业级的应用中，通常会分为，开发、联调、生产等多个环境，一个项目可能要发布到多个微信小程序，在工程化中，通过使用不同的打包命令设置不同的环境变量，解决不同环境各变量的内容需手动修改的问题，比如：接口、前缀、appid等；在使用uniapp开发项目时，通常使用Hbuilder可视化运行项目，点击运行编译出来都代码环境是（development），点击发布运行编译出来的代码是（production），分别对应开发和生产，使用process.env.NODE_ENV来获取运行环境。，存放相关环境变量的信息；
uni-app登录实例的实现
10-29
本实例将详细讲解如何使用HBuilderX工具来开发一个uni-app登录功能。 首先，我们需要了解uni-app的基础知识。uni-app是EcoApp体系下的一个开源项目，由DCloud(数字天堂)推出，它基于Vue.js语法，提供了丰富的组件和...
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新特性： * 默认最小化到页面底部，点击展开面板 * 提供字体文件下载按钮 * 记录最后修改的字体大小和颜色 * 提供设置页面，设置默认字体大小和颜色 * 提供重置数据库的按钮 * 优化视觉 * 优化数据保存格式 支持语言:中文 (简体)
uniapp中使用iconfont-tools实现多色图标，并解决在iOS无法显示
weixin_45333006的博客
05-16 1765
uniapp中使用iconfont-tools实现多色图标，解决在ios空白
微信小程序如何引入彩色iconfont图标？
a896532147的博客
12-13 1158
3，打开iconfont文件将文件名称为”iconfont-weapp“复制到小程序艮目录下，并创建文件名称为”",将你创建的项目下载到本地解压并命名为”iconfont“,在文件”iconfont“下。点击”enter“等到运行结果，如果系统提示找不到npm命令，那就先安装node.js。4，引用：在小程序的app.wxss文件中引入。出现如下内容，点击enter默认即可。">（去掉icon-)1，在阿里云矢量图官网："style"的文件夹下，
uni-app微信小程序使用iconfont支持颜色自定义
weixin_44659286的博客
05-17 695
*每个页面公共css */
iconfont 图标使用深度剖析，轻松掌握使用技巧！
最新发布
newlearner的博客
05-12 720
3 svg方式彩色图标 H5支持多色 但小程序不支持svg图标的js文件 因为svg使用的是iconfont.js，这个iconfont.js中有document的dom操作， 但是小程序里是不支持js的dom操作的。进入iconfont-weapp并将iconfont-weapp-icon.css复制到项目中 并局部修改这个css文件 因为文件里写死了.t-icon的width及height 将.t-icon修改成如下。使用方式<i class="iconfont icon-图标名"></i>
让uniapp小程序支持多色图标icon：iconfont-tools-cli
meteorites的博客
01-20 3306
让uniapp小程序支持多色图标icon：iconfont-tools-cli，yarn安装，配置，项目正常启动或打包直接执行编译；无需单独下载iconfont-tools项目本地执行处理
vue项目使用iconfont（本地下载、彩色icon）
weixin_41292470的博客
08-13 2296
1.下载至本地 1.下载iconfont文件，包含iconfont.ttf、iconfont.css 2.iconfont.ttf 文件 转base64 3.打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置 @font-face { font-family: "iconfont"; src: url(data:application/font-woff;charset=utf-8;base64,转换的base64内容) form
Vue--iconfont图标
52HZ的鱼
02-17 663
1.unicode 引用 （不支持多色，支持按字体的方式去动态调整图标大小，颜色）2.font-class 引用 （unicode使用方式的一种变种，语意明确，容易分辨是哪个icon，本质上还是使用的字体，所以多色图标还是不支持的）3.symbol 引用（全新的使用方式，未来的主流，推荐用法。支持多色图标、支持像字体那样来调整样式）兼容性 unicode > font-class > symbol。
uniapp或者vue引入在线和离线阿里巴巴iconfont字体图标库
水月灯花的博客
11-09 4528
1、在线引入 在当前页面或者uniapp项目的app.vue文件中的全局style样式，导入在线地址，然后使用text标签引入，通过设置font-size可以设置显示大小。 首先将字体图标添加至购物车，然后点击购物车，随便选个项目进行添加。 然后点击更新代码将其生成后点击复制，注意选择font class 复制地址为任意vue文件的style标签中，复制的地址没有https标签，注意添加使用https 然后在vue的template模板中，使用text标签引入，开头添加iconfo..
uni-app接入iconfont图标库
09-12
### 回答1： 要在uni-app中使用iconfont图标库，您需要执行以下步骤： 1. 在iconfont官网中选择您需要的图标，并且将它们添加到您的购物车中。 2. 下载您的图标包并解压到您的本地目录中。 3. 在您的uni-app项目中，将iconfont字体文件复制到您的静态资源目录中。 4. 在您的样式文件中，引用iconfont字体文件，并为图标定义样式。 5. 在您的模板文件中，使用字体图标的编码或名称添加图标。 示例代码： ``` <template> <view> <text class="iconfont icon-menu"></text> </view> </template> <style> @font-face { font-family: "iconfont"; src: url('/static/iconfont/iconfont.eot'); src: url('/static/iconfont/iconfont.eot?#iefix') format('embedded-opentype'), url('/static/iconfont/iconfont.woff2') format('woff2'), url('/static/iconfont/iconfont.woff') format('woff'), url('/static/iconfont/iconfont.ttf') format('truetype'), url('/static/iconfont/iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-menu:before { content: "\e623"; } </style> ``` ### 回答2： 要在uni-app中接入Iconfont图标库，可以按照以下步骤进行操作： 1. 首先，登录Iconfont官网（www.iconfont.cn），注册并登录账户。 2. 在Iconfont官网上搜索需要使用的图标，选择好后添加到购物车。 3. 在购物车页面点击下载，选择uni-app项目，并选择SVG格式进行下载。 4. 下载完成后解压文件，可以看到一个包含所有图标的文件夹。 5. 在uni-app项目的static文件夹下创建一个新的文件夹，例如命名为iconfont。 6. 将解压后的图标文件夹中的字体文件（通常以.ttf或.otf为后缀）复制到刚刚创建的iconfont文件夹中。 7. 在uni-app的项目目录中找到并打开App.vue文件，将以下代码添加到style标签中： ``` @font-face { font-family: 'iconfont'; src: url('./static/iconfont/iconfont.ttf') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` 8. 在需要使用图标的页面中，可以使用类似以下代码的方式引用图标： ``` <text class="iconfont">&#xeXXX;</text> ``` 其中，`&#xeXXX;` 是图标对应的Unicode编码，在iconfont官网上找到对应图标的Unicode编码即可。 9. 最后，编译运行uni-app项目，就可以在页面中看到使用了Iconfont图标库的效果了。 以上就是在uni-app中接入Iconfont图标库的简单步骤。 ### 回答3： uni-app是一个跨平台开发框架，可以方便地开发出同时适用于多个平台的应用程序。在uni-app中接入iconfont图标库可以通过以下步骤完成： 1. 导入iconfont字体文件：首先，在iconfont官网上选择适合项目需要的图标，然后将图标添加到购物车中，并选择图标的格式为“symbol”，下载得到一个包含字体文件的压缩包。 2. 解压字体文件：将下载得到的压缩包解压，得到一个包含字体文件的文件夹。 3. 复制字体文件：将字体文件夹中的iconfont.ttf文件复制到uni-app项目的static目录下，这样字体文件就被放置在了静态资源目录中。 4. 导入字体文件：在uni-app项目的main.js（或者是对应平台的入口文件）中引入字体文件，可以使用以下代码导入字体文件： ``` import './static/iconfont/iconfont.css' import './static/iconfont/iconfont.ttf' ``` 5. 使用图标：现在可以在uni-app的页面代码中使用iconfont图标了。可以通过以下方式使用图标： ``` <i class="iconfont icon-图标名称"></i> ``` 其中，icon-图标名称是在iconfont官网中给图标定义的类名。 通过以上步骤，就成功地将iconfont图标库接入到uni-app项目中了。你可以根据需求选择合适的图标，并在页面中使用它们，从而增加应用的视觉效果和体验。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值