iconfont symbol引入使用有彩色，通过class引入没有彩色

最新推荐文章于 2024-03-27 22:26:36 发布
最新推荐文章于 2024-03-27 22:26:36 发布
阅读量568 收藏 7
点赞数 4
文章标签： iconfont Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44832362/article/details/129786894
版权

  1. 通过class引入使用

第一步

第二步

第三步

第四步

第五步是

下面的压缩包挤压出来，然后把文件夹放到我们的项目，然后在main.ts引入 iconfont.css即可使用

然后就可以在页面中看到我们的图标了，不过这种方式，不支持下载彩色图标，下面的图标下载的应该是彩色的，但是class方式不支持，要想是用彩色图标就使用symbol 方式引入

  1. 通过symbol引入使用

这里的第一到第四步和上面的一样

第五步

第六步

使用自己生成的代替实例的路径

第七步

第八步，展示图标

彩色图标就出来了

ZL随心
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在 iconfont 中使用彩色图标
bug处理进行时
02-04 880
如何在 iconfont 中使用彩色图标
iconfont 使用彩色图标
qq_34870529的博客
11-28 988
【代码】iconfont 使用彩色图标。
iconfont 支持全新的彩色字体图标，来自阿里巴巴佛系前端程序员的指南
最新发布
m0_63174811的博客
03-27 703
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
iconfont引入后不能变色的问题
Anyz Notebook
06-11 4989
项目中使用iconfont作为图标库，更新后发现icon颜色不会随着设置颜色改变，下载的是svg格式。 项目框架用的icon是可以变色的，所以打开可以变色的icon的文件和新下载的文件对比后发现： 新下载的icon的svg文件有写入 fill="#333333" 就是在下载svg文件时候，iconfont是有设置初始色的，把对应设置删除后尝试，可以正常使用。 在iconfont库有批量去色的按钮，可以批量处理。 css样式可以设置 #svg: { fill: red; } ...
iconfont彩色图标
grow_的博客
06-15 1239
进入阿里巴巴矢量图标库，添加图标到项目，然后下载至本地解压后的本地文件如下，核心的是文件2.打开电脑命令行，执行以下命令，全局安装转换工具npminstall-g3.执行cd命令进入第1步解压后的文件夹后，再执行如命令，然后回车。
iconfont 彩色图标的使用
qq_40263927的博客
06-06 362
2. 定位到 iconfont 下载的目录，然后输入iconfont-tools 对 文件进行转换。1.安装 npm install -g iconfont-tools。目录底下生成了iconfont_color.css文件。3. 应用 iconfont_color.css文件。
iconfont引入彩色svg（symbol引入）_kumokoya的博客-CSDN博客
寬真
07-25 119
iconfont引入彩色svg（symbol引入）_kumokoya的博客-CSDN博客
vue-iconfont：更优雅地使用Iconfont.cn，同时支持font-class♡和symbol丨
02-05
Vue Iconfont更优雅地使用 ，同时支持font-class 引入和symbol 引入。安装# Yarnyarn add vue-iconfont# npmnpm i vue-iconfont CDN： | （可通过window.VueIconfont使用）使用首先用Vue.use安装VueIconfont ： ...
Symbol条码枪使用手册
04-26
Symbol 条码枪 LS4208 使用手册 Symbol LS4208 是一款高性能的条码枪，广泛应用于零售、物流、医疗、制造等行业。本手册提供了 Symbol LS4208 的使用指南，帮助用户快速上手使用该设备。 1. Symbol LS4208 概述 ...
设计利器 Sketch 中 Symbol 的使用
03-29
下面介绍其中一个功能 Symbol 的使用方法。 在软件设计中，有很多地方可以重复使用，例如导航栏。这时候就把导航栏转为 Symbol , 下次需要用到时直接插入。 (此图片来源于网络，如有侵权，请联系删除! ) 大家都知道...
word中通过symbol字体输入希腊字母.docx
02-07
word中通过symbol字体输入希腊字母 希腊字母和键盘各个键的对应关系 希腊字母和键盘各个键的对应关系
详解JavaScript 为什么要有 Symbol 类型？
10-17
主要介绍了JavaScript 为什么要有 Symbol 类型，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决iconfont图标symbol引用方式，图标不显示及不能变色的问题
fangcaojushi的博客
06-28 2305
解决iconfont图标无法改色 图标改色的关键是改color,还是改fill
display: table-row; 实现等高布局
li3196672779的博客
06-25 3452
Document * { padding: 0; margin: 0; } #box { display: table-row; } #img { display: table-
uniapp使用iconfonts图标不显示以及颜色问题
Mitin_的博客
08-16 7974
1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可。在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，复制完之后粘贴到本地的对应的iconfont.css文件中。颜色的话也可以在iconfont.css文件中设置 ，如下。在iconfont.css文件中，修改为以下这样的路径。以及图标显示了但是为一个小正方形的问题，同时包括图标颜色不显示的问题。...
如何UNI-APP中使用iconfont彩色图标
weixin_45319327的博客
07-28 2692
uni-app使用彩色iconfont图标
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 257
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
iconfont引入彩色svg（symbol引入）
kumokoya的博客
07-03 314
4.symbol方式引入（引入方式demo.html中有详解）3.复制css及js文件(css头部文件替换)1.上传彩色icon。
iconfont symbol 的用法
03-16
iconfont symbol 是一种常用的图标字体库，它将图标以字体的形式呈现，可以通过 CSS 控制其大小、颜色、阴影等样式。使用 iconfont symbol 可以方便地在网页、移动应用等项目中添加图标，提高页面的美观度和用户体验...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值