前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[踩坑]iconfont Symbol svg引入无法更改颜色

[踩坑]iconfont Symbol svg引入无法更改颜色

作者头像
玖柒的小窝
修改于 2021-11-16 09:18:38
修改于 2021-11-16 09:18:38
3.8K00
代码可运行
举报
文章被收录于专栏:各类技术文章~各类技术文章~
运行总次数:0
代码可运行

起因

最近公司组织架构调整(反正每次组织架构调整,领导就会下场。有一个idea或者有重构一下,先定一个月底上),被拉取一个项目组做新项目。这边图标现状:有些项目是font-face方式,有些用的阿里图标库,最近又在用腾讯图标库,有些甚至直接切图。

拥抱变化,迎接新技术吧。新项目这边使用svg方式引入图标。有一个地方的图标有两种状态:选中与非选中。按照以前我使用font-face的方式,设计只需要传一套,我这边改颜色,既然很多大佬(比如:张鑫旭)都说SVG Sprites比font-face高几层楼,那肯定也支持颜色更改吧。

这不我就刷到了张大佬的svg图标更改颜色,讲得通俗易懂,十分全面。

外部交涉

我试了所有方式,都没成功。好家伙,时间紧,任务重。也就不想纠结原因了,然后就想着找设计要两套吧。发生了以下对话:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
设计:你怎么又改不了
我: 这边是用的svg那种呀,改不了
设计:自己下回多去试试
设计:别个都行,你不行
交涉ing....
我:巴拉巴拉(切图,也可以,图标库也可以,反正给我两套吧)
设计:懒得跟你说,我忙得很
我(内心):这人怎么能一下戳中人的怒气点了,我不忙?
复制代码

别个都行,你不行,杀伤力确实大,我赶紧放下手上工作看看到底是不是自己不行了。上次font-face不能改颜色,好像是图底色问题。这次不会?

问题排查

找一个图标库

既然别个都行,你不行。我就怀疑是不是腾讯的图标库不得行,阿里的可以。所以在阿里图标库随便添加几个,下载项目。

对比两个图标的path

原因

所以还是svg生成的时候设置了fill属性,导致无法更改颜色。修改方法,需要设计那边上传单色图标。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg「建议收藏」
在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Low。
全栈程序员站长
2022/09/20
3.9K0
认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg「建议收藏」
【Butterfly美化】Hexo Butterfly主题使用阿里巴巴iconfont
Butterfly主题使用阿里巴巴iconfont⛄yooo~ 今天教大家美化Butterfly的字体图标⛄Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?⛄可以使用阿里巴巴iconfont来拓展啦Butterfly版本:4.5.1选择图标iconfont图标库地址:iconfont-阿里巴巴矢量图标库找到自己需要的图标之后点击 添加入库图片图片将图标添加至项目中图片生成代码 并 复制代码图片图片Butterfly配置新建css文件在Butterfly主题文件夹下的 /s
LonelySnowman
2022/12/16
1.1K0
iconfont字体图标库
HTML5学堂小编的话:昨日发布的iconfont的内容有些不足,对于可能不太了解iconfont和特殊字体的学习者来说,可能会存在一定的理解问题,在此针对昨日内容进行补充,详细讲解。 字体相关知识 了解iconfont(字体图标)前我们先了解下字体,因为iconfont的实现与字体息息相关,所以掌握字体相关知识便于理解iconfont。接下来看一个简单的例子 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course
HTML5学堂
2018/03/13
5.5K0
iconfont字体图标库
字体图标iconfont的使用
fontClass 支持字体的样式定义,但不支持多色字体,兼容性良好,当要替换图标时,只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。
leader755
2022/03/09
4.3K0
字体图标iconfont的使用
浅尝iconfont
IMWeb前端团队
2017/12/29
2.4K0
浅尝iconfont
【愚公系列】2022年08月 微信小程序-icon图标详解
在小程序中经常会用到各种各样的图标,如果这些图标都使用图片的话,将会大大增加小程序打包后的体积,而小程序限制代码最大2MB,分包加载4MB,所以为了缩小体积,我们可以使用图标来缩小体积。
愚公搬代码
2022/12/01
2.5K0
【愚公系列】2022年08月 微信小程序-icon图标详解
uni-app使用iconfont自定义图标
1.注册阿里巴巴图标矢量库账号 2.选择顶部菜单图标管理-我的项目后新建项目 3.在新建的项目中添加自己喜欢的图标 4.点击查看在线链接,获取在线图标链接代码
薛定喵君
2020/02/25
4.6K0
uni-app使用iconfont自定义图标
转转搭建 iconfont 平台实践
所以在实际的业务代码中 icon 问题的解决方案往往也是八仙过海,能用就行。比如导出为 png, svg 格式的文件,在项目中作为静态资源直接引用,或者上传到 CDN 作为外链引用。显然这些方案多少都存在着一些小问题:
coder_koala
2021/09/22
1.3K0
转转搭建 iconfont 平台实践
VUE项目中使用IconFont 阿里巴巴矢量图标库
近日为了方便前端同事图标的使用,在现有的项目中引入了一下 阿里巴巴矢量图标库iconfont 现记录如下
拿我格子衫来
2022/01/24
9160
VUE项目中使用IconFont 阿里巴巴矢量图标库
05_CSS进阶技巧
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。
张哥编程
2024/12/13
910
Vue3!ElementPlus!更加优雅的使用Icon
这可能是目前最便捷、最合适的 Icon 使用方式了,特别是在 Vue3 中,等等,你以为它只是适用于 Vue3?不,不要被标题欺骗,它支持 Vue2/Vue3、React、Preact、Solid、Svelte 等多种主流框架,同样,它也支持 Vite、Roullp、Webpack、Nuxt、VueCLI、Svelte Kit、Svelte + Vite、Next.js 等多种主流构建工具。之所以标题中带有 Vue3 以及 ElementPlus 单纯是因为此文是以此背景下产生的,示例代码也是基于此。
isboyjc
2022/03/28
7.1K0
Vue3!ElementPlus!更加优雅的使用Icon
阿里iconfont使用方法
文章链接: https://qw-null.github.io/2021/07/20/阿里iconfont使用方法/ ★转载请注明来自 QW’s Blog!★
全栈程序员站长
2022/11/17
6230
阿里iconfont使用方法
iconfont的使用方法
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
全栈程序员站长
2022/11/17
1.1K0
iconfont的使用方法
图标字体应用实践
使用的时候,通过background-position调整显示的位置,如下图所示:
慕白
2018/08/03
2.3K0
图标字体应用实践
Iconfont在教育平台的实践
IMWeb前端团队
2018/01/08
1.7K0
Iconfont在教育平台的实践
Web Icon 123 - 网页内图标的调用
之前 保罗 在使用 php 写他的第一个个人主页的时候,在他的群里提到了 Font-Awesome 这个项目。当时还是纯小白一个,啥也听不懂。直到后来,看了几篇科普的文章,在2018年1月4日第一次在本地环境调用 Font-Awesome 。
惶心
2018/05/07
2.7K9
Web Icon 123 - 网页内图标的调用
小程序实践:基础内容icon,关于图标的5个实现方案等
使用图片也可以达到同样的效果,但是图片如果像素不够,放大了之后效果会虚;还有,图片需要另外存储与加载,使用起来不如图标只使用一个名称方便;再者就是,接下来会看到,图标可以随意改变颜色,而图像不能。
LIYI
2020/03/27
2.2K0
Web图标的工程化方案
https://juejin.cn/post/6952150039732944910
coder_koala
2021/05/28
1.1K0
Web图标的工程化方案
前端成神之路-品优购项目(一)
项目名称:品优购 项目描述:品优购是一个电商网站,我们要完成首页、列表页、详情页、注册页面的制作
海仔
2020/11/24
1.8K0
前端成神之路-品优购项目(一)
适合前端开发 和UI 设计的20多个最佳 ICON 库
在应用界面中图标的存在,会给用户一个良好第一印象,这个挺重要的。但是从零开始开发图标需要大量的时间和金钱。在你的网站上使用图标可以让你有效地与你的访问者交流:它们增加了可读性,突出了重要的内容,加强了功能或特性,增强了设计。因此,使用现成图标是很好的一个选择。
前端小智@大迁世界
2020/05/11
3.1K0
适合前端开发 和UI 设计的20多个最佳 ICON 库
相关推荐
认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg「建议收藏」
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档