阿里iconfont 无法改变图标颜色（fontclass，Unicode）

最新推荐文章于 2025-02-21 16:14:19 发布

原创最新推荐文章于 2025-02-21 16:14:19 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

55 篇文章

订阅专栏

博客提到当其他方法无效时，可尝试取消勾选彩色来解决问题，与信息技术相关，可能涉及前端页面色彩设置等方面。

在这里插入图片描述

如果其他方法都没用，那么试试取消勾选彩色吧

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

红孩儿2011

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

阿里巴巴图标库iconfont的使用方式

m0_67584973的博客

07-03

5433

Iconfont 是一种图标字体服务。它将各种图标设计转换为字体格式，通过特定的代码或 CSS 样式来调用和显示这些图标。可以理解成将图片变成了文字，文字与图片的对比就显而易见了，使用文字图标体积更小，放大也不会失真。

uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标

m0_45858045的博客

02-03

2699

下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。

参与评论您还未登录，请先登录后发表或查看评论

使用阿里字体图标 iconfont 无法改变颜色问题

YM_010530的博客

01-17

1736

但是最近发现了个问题，就是在设置字体图标的颜色时，它失效了，无论怎么弄，图标就是不变色。这搞得一时之间找不到原因所在！字体图标如今在项目中是普遍使用的一种方案，相比较以前的雪碧图方案来说，方便了不少。不管是维护还是使用，都大大降低了心智负担，而且很重要的一点，它可以像字体一样通过 CSS 随意设置颜色～找到原因就好解决问题了，我的解决方案是：把字体图标拆分成两个项目，一个全是彩色的，一个全是纯色的。最终结果就是：如果你的字体项目在【字体格式】那里选择了【彩色】，那么这套字体图标的颜色就不允许修改了！

iconfont图标不能修改颜色解决方案

qq_41920758的博客

10-14

5531

这是因为那些本来就有颜色的icon或者自己选择了颜色的icon下载用到项目里之后就无法改变颜色了。有颜色的icon会在svg的path中增加fill属性，所以无法更改颜色。下载js文件后，用编辑器打开，然后用正则表达式查找：fill="#......" ，进行替换。把要下载的icon添加到项目中，然后在我的项目中选择批量操作，接着选择icon，点击批量去色。在做项目的时候我发现下载的icon有的可以修改颜色而有的不能。，然后在vue.config.js中进行配置（代码加在。

iconfont字体图标无法通过color属性控制颜色问题

weixin_43934792的博客

10-23

1054

字体图标（Icon Font）是一种使用字体文件来表示图标的技术，类似于如何使用字体文件来显示字母和符号。每个图标被设计为一个特定的字符，可以像文本字体一样使用，方便在网页、应用等项目中加载和显示。这种方式不仅支持矢量图形，且具有高度的灵活性和可定制性。

svg 图标颜色无法修改的问题

a432143的博客

06-20

4335

iconfont图标symbol引用方式，有的图标不能通过设置color样式来修改颜色的解决办法现象：iconfont安装后的图标，是通过symbol引用方式，有的图标不能通过color修改颜色的解决办法，有的又可以。 <svg class="icon" aria-hidden="true" style="color:red;...

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

weixin_44832362的博客

03-27

864

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

如何在项目中使用阿里巴巴矢量图标

03-27

`iconfont.css`包含了图标字体的样式规则，通过@font-face指令定义了图标字体的来源和样式。`iconfont.js`则是一个JavaScript库，用于在浏览器端动态加载和渲染图标。在HTML文件中，可以通过引入这两个文件来使用...

iconfont图标资源iconfont图标资源

12-08

这个资源包"iconfont图标资源iconfont图标资源"显然包含了从Iconfont平台下载的一系列图标，主要用于前端网页或者应用程序的界面设计。在前端开发中，图标字体（Font Icons）是一种流行且实用的方法，它将图标以...

Vue3+vite引入阿里图标库的三种方式和封装svg组件

幽幽谷

09-06

612

Vue3+vite引入阿里图标库的三种方式和封装svg组件

使用 iconfont.cn自定义图标，设置color无效

Cvory

03-09

1836

需求说明： Antd官网API说明中明确写可以使用设置color改变颜色，但在实际使用中设置后无效出现原因及解决：当上传至图标库时，要选择去掉颜色并提交，这样才可以用color去控制颜色

超实用的iconfont中svg图片颜色动态修改方法

最新发布

Jinuss的博客

02-21

1401

超实用的iconfont中svg图片颜色动态修改方法

字体图标iconfont无法用color控制和设置颜色的解决方案

孤行者程序之路的博客

05-26

5802

使用阿里巴巴图标库无法用color属性改变图标颜色的问题解决方案

react+ umi 使用iconfont,实现更改图标颜色

weixin_50745161的博客

12-29

3523

1.线上引用，这种无法更改图标颜色 import { createFromIconfontCN } from '@ant-design/icons' const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_2242890_ffxnfeb837a.js' }); 2.下载到本地将下载下来的文件夹放到assets文件夹下，自己命名一个名称将iconfont.js文件提取出来放到public文件夹

css的font修改颜色,css的font字体颜色如何设置

weixin_35698805的博客

08-04

5436

css的font字体颜色设置方法：1、直接在标签上使用“color:颜色”设置字体颜色；2、通过给font标签添加class属性，在css标签中通过该class设置字体颜色。本教程操作环境：windows7系统、css3版，DELL G3电脑。css的font字体颜色设置方法：新建一个html文件，命名为test.html，用于讲解css中font字体颜色怎么设置。在test.html文件内，使用...

阿里图标库使用font class 写法和unicode引用，简单，使用快捷

Bad_Shepherd的博客

02-12

3930

主要介绍 font class 写法，这种写法使用简单直接开始吧使用步骤 1.打开阿里图标库的官网：https://www.iconfont.cn/ 2.直接搜索想找的图标，比如购物车有时会弹出一些教程，点了就行，会出来这么多图标。 3.选择好图标，然后加入购物车，这里要注意的是，如果做实际的项目时，肯定会用到多个图标，这时候，需要一次性加入。不然会导致一些问题。加入完成之后可...

引入阿里图标库（iconfont）后图标黑白问题

陈景夏

11-30

4859

Font Class引入方式不支持彩色图标。想要运用彩色图标得通过Symbol方式引入，得以SVG的方式展示。 <svg class="icon" aria-hidden="true"> <use xlink:href="#对应的类名"></use> </svg> // 加个通用样式把，不然引入贼大。 .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColo

阿里巴巴fonticon字体图标的使用

热门推荐

MPFLY的博客

08-17

2万+

很早之前就知道阿里巴巴的fonticon矢量图标库，以前是这么使用的：下载某个图标的.png格式，然后引用到项目中，通过img标签或者background来使用。当然我知道该矢量图库可以将图标转换为字体文件来使用，但是一直没有机会来使用。因为大部分时间，设计都会把图标以图片的格式准备好，我只需要做一张雪碧图，就可以很好的使用了。下面来总结一下该字体图标的使用方法。 1.如何将字体图标下载到本...

通过iconfont-阿里巴巴矢量图标库的Symbol引用，修改颜色不起作用的解决方案

qq_62025051的博客

08-22

853

通过iconfont-阿里巴巴矢量图标库的Symbol引用，修改颜色不起作用的解决方案

图标字体（Iconfont）是通过 Unicode 字符

01-21

### 图标字体（Iconfont）与Unicode字符的关系图标字体是一种通过字体形式来展示图标的解决方案。每个图标对应特定的Unicode编码，在HTML和CSS中可以通过这些编码来调用相应的图标。这种方式使得图标如同文字一样易于处理，支持缩放而不失真，并可通过CSS轻松调整颜色和其他属性。在具体实现上，`iconfont.css` 文件定义了一个自定义字体家族 `@font-face` 和一系列带有 `.iconfont` 类的选择器[^2]。对于每一个图标而言，存在一个唯一的Unicode编码与其关联，该编码被用于替换默认的文字内容，从而显示出对应的图形符号。 ### 使用 Unicode 字符表示图标字体 Iconfont 的方法为了正确地使用Unicode字符作为图标字体，以下是具体的步骤： #### 准备工作 1. **加入购物车并下载代码** 用户可以选择所需的图标放入购物车；如果仅有一个图标，则可以直接下载其代码片段；若有多个图标则建议创建一个新的项目以便统一管理。完成选择后点击下载按钮获得所需资源[^3]。 2. **集成到前端工程** 下载得到的压缩包内含有字体文件及其样式表。将字体文件放置于合适位置（例如 `/static/fonts/`），并将 CSS 样式链接或嵌入至 HTML 文档头部区域。确保路径设置无误以使浏览器能够加载指定字体。 ```html <link rel="stylesheet" href="./path/to/iconfont.css"> ``` #### 应用图标当准备就绪之后，就可以按照如下方式应用图标了： - 获取所选图标的Unicode编码值。这些编码通常可以在阿里云矢量图标库网站上的详情页找到，形如 `\e900` 或者其他十六进制数列。 - 编写 HTML 结构创建包含类名`.iconfont` 的 `<i>` 或 `<span>` 元素，并利用 `&#x<code>;` 形式的实体引用插入实际的Unicode码点。 ```html <i class="iconfont"></i>  <span class="iconfont"></span> ``` 值得注意的是，由于某些框架可能会转义特殊字符而导致无法正常解析为图标的情况发生。此时可以考虑采用Vue.js 中提供的 `v-html` 指令或者其他模板引擎特有的机制绕过这种限制[^1]。例如，在 Vue 组件内部编写如下代码即可解决问题： ```vue <template> <div>  <span v-html="'\ue60b'"></span> </div> </template> <script setup lang="ts"> // ... </script> ``` 这样做的目的是让编译工具不会干扰原始字符串的内容，而是将其视为纯文本传递给最终渲染出来的 DOM 节点。