直接用 color 即可控制图标字体颜色，因其本质是特殊字符；需确保字体加载、类名正确及 CSS 优先级合理，推荐使用 currentColor 实现颜色同步，状态样式应结合伪类或属性选择器控制。
直接用 color 就能控制图标字体颜色
绝大多数图标字体（如 Font Awesome、iconfont、IcoMoon）本质是“特殊字符”，浏览器把它当文本渲染，所以 color 属性会直接作用于图标。不需要额外写 fill 或 stroke —— 那些只对 SVG 有效。
- 只要图标元素有正确的字体类名（比如
.icon-heart），且字体已加载成功，color: #e74c3c;就能让它变红 - 不生效？先检查是否漏了
@font-face或 CDN 链接，再确认类名拼写和 CSS 优先级（比如父级设了color: inherit却没显式覆盖） - 避免滥用
!important：它容易掩盖继承或层叠问题，调试时反而更难定位
currentColor 是让图标自动跟随文字色的关键字
当你希望图标和旁边文字颜色始终保持一致（比如按钮里带图标，文字变色时图标也同步变），别重复写颜色值，用 currentColor 最稳妥。
.btn {
color: #007bff;
}
.btn .icon {
color: currentColor; /* 自动取 .btn 的 color 值 */
}-
currentColor是一个动态关键字，始终等于该元素当前计算出的color值 - 它不仅适用于图标字体，也适用于 SVG 的
fill和stroke，甚至border-color，一改全改 - 注意：如果图标元素自身没设置
color，它会继承父级的；若父级也没设，则回退到浏览器默认（通常是黑色）
悬停、禁用等状态下的颜色要靠伪类和属性控制
图标颜色不是静态的，常需响应用户操作。这时候不能只靠基础 color，得结合伪类或状态类来写。
.icon {
color: #666;
}
.icon:hover {
color: #2c3e50;
}
.icon[disabled] {
color: #bdc3c7;
}-
:hover、:active、:focus这些伪类必须作用在图标元素本身，或其可交互父容器上（否则可能不触发） - 禁用态建议用
[disabled]属性选择器而非:disabled（后者对非表单元素无效） - 如果图标被包裹在
<a>或<button>中，优先给容器设状态样式，再用currentColor向下透传，逻辑更清晰
颜色值选哪种？看项目实际需求
color 支持多种写法，没有绝对优劣，但不同场景下效率和可维护性差别明显。
立即学习“前端免费学习笔记（深入）”；
- 快速原型或小项目：用颜色关键字（
red、darkblue）最省事，但语义弱、选择少 - 设计还原要求高：十六进制（
#3498db）最常用，兼容性好，设计师给的色值基本就是这个格式 - 需要透明度或主题化：用
rgba()或hsla()，比如color: rgba(0, 123, 255, 0.8)；配合 CSS 变量（--primary: #007bff）还能一键换肤 - 别用 RGB 百分比（如
rgb(100%, 0%, 0%)）—— 冗余且无优势，现代浏览器也不鼓励
真正容易被忽略的是继承链和字体加载时机：图标没变色，90% 不是 color 写错了，而是字体还没加载完就执行了样式，或者某层父元素用 color: transparent 意外吞掉了颜色。先查 computed styles，再看 network 面板里的字体请求状态。
