css如何让图标颜色跟随文字变化_利用currentColor继承颜色

currentColor 是 css 关键字，代表当前元素的 color 计算值，可自动继承文本颜色并用于 fill、border-color 等属性，适用于内联 svg 和字体图标，现代浏览器及 IE9+ 均支持。

直接使用 currentColor 就能让图标颜色自动跟随文字颜色变化，无需额外写 js 或重复定义颜色值。

什么是 currentColor？

currentColor 是一个 CSS 关键字，代表当前元素的 color 计算值。它像一个“颜色变量”，会自动继承父级或自身设置的文本颜色，并可用于任何接受颜色值的属性（如 fill、border-color、background-color 等）。

SVG 图标中用 fill: currentColor

当 SVG 以内联方式嵌入 html（即写在 HTML 中，不是通过 引入），可直接对 或其子元素（如 、）设置 fill: currentColor：

      点击编辑 

此时 SVG 图标会和“点击编辑”文字一样是蓝色；若把 style="color: red"，图标立刻变红。

立即学习“前端免费学习笔记（深入）”；

字体图标（如 Font Awesome）也适用

如果使用 这类字体图标，本质是文字，只需确保其 color 被正确设置，图标自然随文字变色。不需要额外设置 fill —— 因为字体图标渲染靠的是 color 属性本身。

• 避免写死 color: #333 在图标上，让它继承父级 color
• 需要统一控制时，可在父容器设 color，所有子图标自动响应
• 配合伪元素（如 ::before）插入字体图标时，同样用 color: inherit 或直接依赖继承链

兼容性与注意事项

currentColor 支持所有现代浏览器（chrome 19+、firefox 19+、safari 6+、edge 全支持），IE9+ 也支持，基本可放心使用。

• 仅对内联 SVG 生效； 不会继承，因为 SVG 是独立文档上下文
• 若 SVG 中已有 fill 写死（如 fill="#000"），会覆盖 currentColor，需移除或改为 fill="currentColor"
• 用 currentColor 设置边框、阴影、背景时同样有效，比如 border: 1px solid currentColor