Iconfont怎么保留图标颜色

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

首先，点击网址阿里巴巴矢量库进入
搜索你要的图标，加入购物车
在这里插入图片描述
在这里插入图片描述
添加至项目
我使用的是fontclass方法，这个简洁一点
在这里插入图片描述
复制链接在html里引入外部css文件复制绝对路径
在这里插入图片描述
在这里插入图片描述
选中想要的图标复制代码，代码既是类名称，然后class类里必须一个是iconfont 一个是复制的代码 见上图
这时候展现的既是图标样式但是没有颜色，如下图：
在这里插入图片描述
这是因为style引入被阻截了，这时候，需要知道这是字体图标，那么他就可以像设置字体颜色一样设置颜色！！！
在这里插入图片描述
加个** color**不就解决了吗
在这里插入图片描述
苔痕上阶绿
草色入帘青

杰哥-孙伟杰
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
iconfont字体图标.pdf
06-27
（3）灵活性：轻松地改变图标的颜色或其他CSS效果。 （4）可扩展性：改变图标的大小，就像改变字体大小一样容易。 （5）矢量性：图标是矢量的，与像素无关。缩放图标不会影响清晰度。 （6）兼容性：字体图标支持所有...
flutter-iconfont-cli:在flutter中使用iconfont图标，不依赖字体，支持多色彩
05-06
2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件 Step 1 在项目文件pubspec.yml中加入flutter插件 flutter_svg { ... dependencies: # 版本号请以官方库的为准：...
iconfont官网中的图标保留其原本的颜色
weixin_54000091的博客
08-04 1529
iconfont字体彩色字体图标的使用
iconfont 使用彩色图标
qq_34870529的博客
11-28 1003
【代码】iconfont 使用彩色图标。
iconfont 支持全新的彩色字体图标，来自阿里巴巴佛系前端程序员的指南
最新发布
m0_63174811的博客
03-27 716
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
iconfont中添加彩色图标
weixin_49651654的博客
01-12 831
symbol引用： 使用步骤如下： 第一步：引入项目下面生成的symbol代码： (首先需要引入iconfont.js文件，此js文件相当于是svg图形集合文件的调用) 第二步：加入通用css代码（引入一次就行） 第三步：挑选相应图标并获取类名，应用于页面： 实际情况中"iconfont"（font-family）需要修改为你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。 ...
ios导航栏又按钮添加图片后使其保持原色
diaomu2002的博客
10-08 119
//单一导航栏按钮设置如下 UIBarButtonItem *rightBarItem = [[UIBarButtonItem alloc] initWithTitle:nil style:UIBarButtonItemStylePlain target:self action:@selector(addItemmmClick)]; self.navigationItem.r...
iconfont引入后不能变色的问题
Anyz Notebook
06-11 4999
项目中使用iconfont作为图标库，更新后发现icon颜色不会随着设置颜色改变，下载的是svg格式。 项目框架用的icon是可以变色的，所以打开可以变色的icon的文件和新下载的文件对比后发现： 新下载的icon的svg文件有写入 fill="#333333" 就是在下载svg文件时候，iconfont是有设置初始色的，把对应设置删除后尝试，可以正常使用。 在iconfont库有批量去色的按钮，可以批量处理。 css样式可以设置 #svg: { fill: red; } ...
taro-iconfont-cli:在Taro框架中使用iconfont图标，支持多端，支持多色彩，不依赖字体
05-02
在Taro框架中使用iconfont图标，不依赖字体，支持多色彩。 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 H5 特性 1、一键生成标准组件，多端支持 2、使用方便，import即可 3、支持多色彩 4、...
iOS开发中使用文字图标iconfont的应用示例
08-29
然后，查找iconfont图标的Unicode编码。在下载的文件夹中，找到名为“demo_unicode.html”的文件，此文件显示了每个图标的Unicode编码。这些编码需要转换为Objective-C或Swift中可识别的形式。对于Swift，转换规则是...
react-iconfont-cli:转换iconfont图标为React标准组件，不依赖字体，支持多色彩
05-25
2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件，支持es6和typescript两种文件格式 Step 1 安装插件 # Yarn yarn add react-iconfont-cli --dev # Npm npm install react-iconfont-cli --save-dev ...
iconfont 多色图标使用介绍
iamlujingtao的博客
10-11 5062
iconfont 多色图标使用介绍前言一、多色文字图标特点二、多色文字图标使用方式三、修改颜色结语 前言 阿里巴巴矢量图标库 http://iconfont.cn 已经推出多色图标很久了，那么究竟如何使用呢？ 一开始我以为和普通文字图标无区别，但实际使用的时候发现并不是。 多色文字图标其实是用svg做的，需要引用js才能正确使用，优缺点也比较明显，但是这种方式是符合未来发展方向的，值得推荐使用的。...
字体图标iconfont无法用color控制和设置颜色的解决方案
孤行者程序之路的博客
05-26 4255
使用阿里巴巴图标库无法用color属性改变图标颜色的问题解决方案
vue项目使用iconfont图标方法
时光乱了谁的心的博客
03-20 733
一、关于iconfont iconfont矢量图标库是由阿里妈妈MUX倾力打造的矢量图标管理、交流平台。iconfont主要为icon设计师们量身打造，专注于原创图标设计，集图标搜索、下载、上传、管理等多项功能于一体，同时还能够将图标转化为字体应用，方便应用于web前端。 二、优点 1、加载文件体积小，有利于优化 2、通过改变font-size、color就能自由变换大小，修改颜色，就像控...
uni-app里引入阿里彩色矢量图标，结果显示黑白的解决方案
前端小白, 稀土：雩风十六
03-19 2422
引入iconfont后，原本彩色的图标变成黑白，彩色部分甚至一坨黑，该问题的解决方案。
iconfont 应用与理解
nicexibeidage的博客
12-01 2051
iconfont 一个阿里爸爸做的开源图库，人家还有专门的 github issue，但人家的图标数量还是很惊人的，不仅有几百个公司的开源图标库，还有各式各样的小图标，还支持自定义创建图标库，所以不管你是一家创业公司还是对设计很有要求的公司，它都能很好的帮助你解决管理图标的痛点。你想要的基本都有~ 为什么要将icon做成字体？ 在很多网站项目中，我们常常会用到各种透明
图标字体、层级、透明效果、轮播图
m0_48462345的博客
11-29 387
图标字体、层级、透明效果、轮播图相关笔记、代码、运行结果
uniapp使用iconfonts图标不显示以及颜色问题
Mitin_的博客
08-16 8018
1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可。在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，复制完之后粘贴到本地的对应的iconfont.css文件中。颜色的话也可以在iconfont.css文件中设置 ，如下。在iconfont.css文件中，修改为以下这样的路径。以及图标显示了但是为一个小正方形的问题，同时包括图标颜色不显示的问题。...
iconfont Logo图标库如何点击icon图标改变颜色
07-17
要使用 iconfont Logo 图标库，并实现点击图标改变颜色的效果，你可以按照以下步骤进行操作： 1. 在 iconfont 网站上选择你需要的 Logo 图标，并将其添加到购物车。 2. 在购物车中下载图标库文件，其中通常包含了一个 CSS 文件和一个字体文件。 3. 将下载的 CSS 文件和字体文件引入到你的 HTML 文件中。 HTML: ```html <link rel="stylesheet" href="path/to/iconfont.css"> ``` 4. 在 HTML 文件中插入相应的图标。 HTML: ```html <i id="my-icon" class="iconfont icon-logo"></i> ``` 5. 使用 CSS 设置图标的初始颜色和点击后的颜色。 CSS: ```css .icon { color: #000; /* 设置初始颜色 */ cursor: pointer; /* 添加手型光标以表示可点击 */ } .clicked { color: #f00; /* 设置点击后的颜色 */ } ``` 6. 使用 JavaScript 添加点击事件监听器，并在点击时改变图标的颜色。 JavaScript: ```javascript const icon = document.getElementById('my-icon'); icon.addEventListener('click', function() { icon.classList.toggle('clicked'); }); ``` 确保将 "path/to/iconfont.css" 替换为你实际下载的 CSS 文件的路径。同时，根据你的需求修改图标的类名、颜色和样式。 这样，当你点击图标时，它会切换到 clicked 类，从而改变图标的颜色为点击后的颜色。 请注意，具体的类名、颜色和样式可能根据你使用的 iconfont Logo 图标库而有所不同，你需要参考该图标库的文档或示例来确定正确的类名和样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值