教你如何跨越iconfont彩色图标40个个数限制

最新推荐文章于 2024-03-27 22:26:36 发布
最新推荐文章于 2024-03-27 22:26:36 发布
阅读量1k 收藏 1
点赞数 1
文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36765732/article/details/127515197
版权

当项目需求iconfont彩色图标在40个以内时，咱们可以用常规方法做，但是当彩色图标多于40个时，这就要想办法了，目前试验了下，采用的是将iconfont图标转成base64这种形式，步骤如下

1.下载iconfont图标，解压包

2.cmd进入字体项目,输入命令行 iconfont-tools，这时项目会 生成一个iconfont-weapp文件夹

然后你引入iconfont-weapp-icon.css这个文件，那么在项目中就可以使用了

<div class="t-icon t-icon-wu"></div>

小程序也一样

<view class="t-icon t-icon-wu"></view>

MrBma
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
flutter-iconfont-cli:在flutter中使用iconfont图标，不依赖字体，支持多色彩
05-06
flutter-iconfont-cli 用纯JS把iconfont.cn的图标转换成Flutter Widget，不依赖字体，支持多色彩 特性 1、纯组件，不依赖字体，体积小 2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件 Step 1 在项目文件pubspec.yml中加入flutter插件 flutter_svg { ... dependencies: # 版本号请以官方库的为准：https://pub.dev/packages/flutter_svg flutter_svg: ^0.19.3 ... } 然后执行flutter插件安装操作 flutter packages get 接着安装全局插件（基于nodeJs） npm install flutter-iconfont-cli -g Step 2 生成配置文件 npx iconfon
新浪UED:教你快速制作IconFont
02-03
我认为，我们现在通常所指的IconFont，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。这是一淘网用到IconFont的地方这是新浪微博微吧用到IconFont的地方这里还有我们自己做的小浪人首先它的体积要比...
iconfont 使用彩色图标
qq_34870529的博客
11-28 1028
【代码】iconfont 使用彩色图标。
iconfont 支持全新的彩色字体图标，来自阿里巴巴佛系前端程序员的指南
最新发布
m0_63174811的博客
03-27 740
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
iconfont 支持全新的彩色字体图标
u012384510的博客
06-08 925
大家好，我是若川。iconfont我相信大家都用过，而现在支持全新的彩色字体图标了。这是第二次转载，上一次的好文是2020 前端技术发展回顾。点击下方卡片关注我、加个星标学习源码整体架构系...
阿里图标库彩色图标使用
qq_40291247的博客
12-02 1716
支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 兼容性较差，支持 ie9+,及现代浏览器。 /**通用css*/ .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; ...
iconfont多色图标的使用方法
奔跑的小猪仔
05-22 6082
- Symbol 引用：支持多色图标了，不再受单色限制。 1：去这里下载图片的相关文件https://www.iconfont.cn，具体步骤如下： 1-1）： 1-2）： 2：在本地项目中引入 import './icon/iconfont.js' 或者 <script src="./iconfont.js"></script> 3：加入通用 CSS 代码 ....
iconfont在html种颜色,iconfont+开始支持彩色图标
weixin_35170789的博客
06-16 767
之前发表过一篇关于iconfont图标字体的相关教程，以文字的方式，实现网页中的图标和特殊字符。教程链接可参考：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950前段时间去iconfont官网逛逛，发现iconfont已经升级iconfont+了，对比起之前的iconfont，iconfont+最大的特点是什么呢？iconfont+...
vue项目引入Iconfont图标库的教程图解
10-17
主要介绍了vue项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
IconFont图标提取器htm2svg-1.0.8.6.zip
10-22
IconFont图标提取器是一款实用工具，专为处理和管理 IconFont 图标库而设计。它主要功能是将基于HTML的IconFont图标转换为SVG格式，SVG（Scalable Vector Graphics）是一种可缩放矢量图形格式，具有清晰度高、大小可...
如何在 iconfont 中使用彩色图标
bug处理进行时
02-04 935
如何在 iconfont 中使用彩色图标
iconfont 彩色图标的使用
qq_40263927的博客
06-06 369
2. 定位到 iconfont 下载的目录，然后输入iconfont-tools 对 文件进行转换。1.安装 npm install -g iconfont-tools。目录底下生成了iconfont_color.css文件。3. 应用 iconfont_color.css文件。
【微信小程序使用单色及彩色阿里巴巴矢量图标库】
regretTAT的博客
05-24 633
微信小程序使用iconfont图标 单色以及彩色
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 3402
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
iconfont.cn 下载至本地操作过于频繁的解决办法“之一”
weixin_44283478的博客
07-16 564
iconfont.cn 下载至本地操作过于频繁的解决办法“之一” 利用node下载资源到项目中，正常引用即可。 步骤： 下载主文件内容 获取主文件中兼容资源的路径并下载存储 编辑@font-face {…}后存储主文件 预先准备 我的路径是这样: |-src |-assets |-iconfont |-lib |-js |-downloadIcon.js |-package.json 说明： iconfont：存储下载的文件 downloadIcon.js： 执行操作的文件，由于
vue前端项目批量引入iconfont
white_777的博客
12-27 435
在日常开发过程中，项目内的icon资源ui会通过iconfont共享给前端开发，所以需要前端引入iconfont到项目中。
关于阿里矢量图标的普通无色和彩色的使用方法
qq_43235503的博客
08-30 1861
关于阿里矢量图标的普通无色和彩色的使用方法
display: table-row; 实现等高布局
li3196672779的博客
06-25 3460
Document * { padding: 0; margin: 0; } #box { display: table-row; } #img { display: table-
如何一键批量下载Iconfont图标
a1518079148的博客
02-10 1377
如何一键批量下载Iconfont图标，只需两步即可完成下载，打开网页，点击下载，附带如果在vue3中使用教程
iconfont字体图标如何放大
09-02
要放大 iconfont 字体图标，你可以使用 CSS 的 `font-size` 属性来调整其大小。首先，确定你想要的图标大小，然后将 `font-size` 设置为相应的数值即可。 例如，如果你希望将 iconfont 字体图标放大到 20 像素，可以在 CSS 中添加以下样式： ```css .icon { font-size: 20px; } ``` 其中 `.icon` 是你应用于 iconfont 字体图标的 CSS 类名。将这个类名添加到包含图标的元素上，就可以使图标放大到指定大小。 除了直接设置 `font-size` 属性，你还可以使用其他 CSS 属性来调整字体图标的大小，如 `transform: scale`、`width` 和 `height` 等。选择适合你需求的方法即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值