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

最新推荐文章于 2024-05-16 14:20:06 发布
最新推荐文章于 2024-05-16 14:20:06 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45593068/article/details/120605872
版权

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

安装iconfont-tools

npm i -g iconfont-tools

全局安装工具

下载iconfont并使用工具

  • 在下载iconfont下
# 下载的iconfont.js目标文件下, 一直回车即可
iconfont-tools

生成iconfont-wapp文件
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cET7eQsc-1633339111405)(/微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用2.png)]

一直回车, 默认是t-icon前缀

  • 非sass小程序用.wxss即可，sass小程序和uniapp可以用.css

添加到项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7BvPx7wS-1633339111407)(/微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用3.png)]

  • 效果
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6bmTxeJ2-1633339111410)(/微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用4.png)]
xiaoQinVar
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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新特性： * 默认最小化到页面底部，点击展开面板 * 提供字体文件下载按钮 * 记录最后修改的字体大小和颜色 * 提供设置页面，设置默认字体大小和颜色 * 提供重置数据库的按钮 * 优化视觉 * 优化数据保存格式 支持语言:中文 (简体)
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中使用iconfont-tools实现多色图标，并解决在iOS无法显示
最新发布
weixin_45333006的博客
05-16 602
uniapp中使用iconfont-tools实现多色图标，解决在ios空白
微信小程序使用 iconfont-阿里巴巴 彩色图标库
weixin_47174945的博客
11-01 538
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打
微信小程序如何引入彩色iconfont图标？
a896532147的博客
12-13 757
3，打开iconfont文件将文件名称为”iconfont-weapp“复制到小程序艮目录下，并创建文件名称为”",将你创建的项目下载到本地解压并命名为”iconfont“,在文件”iconfont“下。点击”enter“等到运行结果，如果系统提示找不到npm命令，那就先安装node.js。4，引用：在小程序的app.wxss文件中引入。出现如下内容，点击enter默认即可。">（去掉icon-)1，在阿里云矢量图官网："style"的文件夹下，
在uni-app中使用彩色的iconfont
m0_43413873的博客
12-29 660
在uni-app中使用彩色的iconfont 一、在阿里巴巴矢量图标库下载iconfont 二、shift+右键打开powerShell 或者 直接在地址栏输入 cmd 三、 执行一下代码 npm install -g iconfont-tools 四、在步骤2解压的文件中 执行命令行 （shift+右键 打开powershell 窗口 也行） iconfont-tools 五、目录会多了个icon文件夹 六、 进入icon 文件夹 ctrl+a 全选 复制到 static 文件中 七、粘
uni-app使用微信小程序云函数的步骤示例
10-15
在本教程中，我们将深入探讨如何在uni-app中使用微信小程序云函数。uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台应用，包括iOS、Android、H5、微信小程序等。而微信小程序云函数则是在微信小程序...
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网...
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
10-16
主要介绍了uni-app微信小程序登录并使用vuex存储登录态的思路，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序 wechat-app-xiaoyima-master（截图+源码）
05-11
微信小程序 wechat-app-xiaoyima-master（截图+源码）微信小程序 wechat-app-xiaoyima-master（截图+源码）微信小程序 wechat-app-xiaoyima-master（截图+源码）微信小程序 wechat-app-xiaoyima-master（截图+源码）...
微信小程序 uni-app wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分
09-01
【微信小程序 uni-app wxml-to-canvas】是一个用于在微信小程序中利用静态模板和样式来绘制canvas，并最终能够导出为图片的工具。这个技术在实际应用中特别适合用来生成分享图，即用户在社交平台上分享时看到的个性...
uni-app中使用彩色的iconfont
weixin_42587620的博客
11-19 486
链接地址 https://www.cnblogs.com/caijinghong/p/13432906.html
让uniapp小程序支持多色图标icon：iconfont-tools-cli
meteorites的博客
01-20 2984
让uniapp小程序支持多色图标icon：iconfont-tools-cli，yarn安装，配置，项目正常启动或打包直接执行编译；无需单独下载iconfont-tools项目本地执行处理
uniApp中使用iconfont彩色icon
Benz_s600的博客
08-11 578
uniApp中使用彩色icon
uniapp或者vue引入在线和离线阿里巴巴iconfont字体图标库
水月灯花的博客
11-09 3509
1、在线引入 在当前页面或者uniapp项目的app.vue文件中的全局style样式，导入在线地址，然后使用text标签引入，通过设置font-size可以设置显示大小。 首先将字体图标添加至购物车，然后点击购物车，随便选个项目进行添加。 然后点击更新代码将其生成后点击复制，注意选择font class 复制地址为任意vue文件的style标签中，复制的地址没有https标签，注意添加使用https 然后在vue的template模板中，使用text标签引入，开头添加iconfo..
微信小程序iconfont图标字体解决方案
多一份贡献,多一份环保
03-20 5390
此文演示如何在小程序上使用iconfont字体图标。 使用说明 登录阿里巴巴iconfont.cn 新建项目 点击icon收藏 加入到test项目中 下载到本地解压 生成代码 复制iconfont.css到xxx.wxss 替换iconfont.css中的@font-face为上面的生成代码 xxx.wxss样式中@import使用 ...
微信小程序中 iconfont 图标的使用（包括彩色图标）
weixin_42754922的博客
11-17 848
微信小程序中 iconfont 图标的使用（包括彩色图标）
开发小程序如何使用iconfont彩色图标
jie_rookie的博客
11-22 603
解决开发小程序需要使用iconfont彩色图标

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值