Iconfont图标颜色改不了需先确认渲染方式：SVG字体图标用color，Symbol内联SVG用fill/stroke；检查DOM标签类型、内联属性冲突、组件继承及字体加载状态。
Iconfont 图标颜色改不了？优先检查 CSS 选择器权重和 fill/stroke 覆盖逻辑
Iconfont 多数是 SVG 字体或内联 SVG，颜色控制方式完全不同：SVG 字体图标（如 @font-face 引入的）靠 color；而 Symbol 引用的内联 SVG 靠 fill 或 stroke。直接写 color: red 对后者无效，这是最常卡住的地方。
- 用浏览器开发者工具点开图标 DOM，看它最终渲染的是
<use></use>、<i></i>还是<svg></svg>标签 - 如果是
<use href="#icon-home"></use>，说明走的是 SVG Sprite，必须用fill控制颜色，且要确保fill没被 SVG 内部的fill="currentColor"或硬编码值锁死 - 如果图标是
<i class="iconfont icon-home"></i>，且字体文件是通过@font-face加载的，则只认color，fill完全不起作用
Symbol 方式引入时 fill 不生效？确认 SVG 源文件是否带内联 fill 属性
从 Iconfont 下载的 iconfont.js 或 iconfont.svg 文件里，每个 <symbol></symbol> 内部的路径（<path></path>）可能自带 fill="#333" 或 fill="none"。这些内联属性优先级高于 CSS，会导致你写的 fill: red 被忽略。
- 打开下载的
iconfont.svg文件，搜索<path>，删掉所有 <code>fill="..."和stroke="..."属性（保留d和class即可） - 或者在引用时加
!important强制覆盖：.icon-home { fill: #ff6b6b !important; }（仅临时调试用） - 更稳妥的做法：用 Webpack/Vite 插件（如
vite-plugin-svg-icons）自动剥离内联样式，而非手动改 SVG 源文件
Vue/React 项目中动态改色失败？注意组件封装对 SVG 属性继承的干扰
在封装 Icon 组件时，如果用 v-html 或 dangerouslySetInnerHTML 注入 SVG 内容，父级设置的 fill 默认不会穿透到子 SVG 元素——除非显式声明 fill="currentColor" 并让 CSS 的 color 传递下去。
- 确保 SVG 源中
<path></path>的fill值是"currentColor"，而不是固定色值 - 在组件上设
color，而非fill：<myicon style="color: #409eff;"></myicon> - React 中若用
react-icon类库，注意它默认把fill设为"currentColor"；但自定义组件若漏了这句，就会断链
字体图标（.woff/.ttf）颜色始终灰白？检查 font-display 和 Unicode 映射是否错位
字体图标本质是字符，依赖 Unicode 编码映射。如果 CSS 里写了 color 却没变色，大概率是字体未正确加载，或伪元素内容（::before）的 content 值与字体文件中的 glyph 不匹配。
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 的 Network 面板，确认
iconfont.woff等字体文件状态码是 200，不是 404 或 CORS 错误 - 查看元素 computed styles，确认
font-family确实命中了"iconfont"，且没有被其他字体回退覆盖 - 对比
iconfont.css里的.icon-home::before { content: "\e601"; }和字体文件实际 glyph 编码是否一致（可用 FontForge 打开验证）
真正麻烦的不是改颜色，而是搞清当前图标到底走的是哪条渲染链路——字体？Symbol？Base64 内联？每种链路的颜色控制开关位置都不同，动之前先用 DevTools 看清真实 DOM 结构，比查文档快得多。
