在前端项目里，图标字体被广泛用于展示各类功能图标，当项目规模扩大后，不同页面、不同状态下的图标字体颜色往往需要统一调整，手动逐个修改样式不仅繁琐还容易出错。通过css变量控制图标字体颜色，可以实现颜色值的一处定义、全局复用，大幅降低维护成本。
css变量的基础使用
css变量也叫自定义属性，以--开头定义，通过var()函数调用。通常我们会把需要复用的变量定义在根伪类:root下，这样整个文档都可以访问到这些变量。
定义全局css变量的示例代码如下：
/* 定义根作用域下的全局css变量 */
:root {
/* 图标字体默认颜色 */
--icon-font-default-color: #333333;
/* 图标字体 hover 状态颜色 */
--icon-font-hover-color: #1890ff;
/* 图标字体禁用状态颜色 */
--icon-font-disabled-color: #cccccc;
}
将css变量应用到图标字体颜色
假设项目中使用了字体图标库，图标元素的类名是icon-font，我们可以通过以下方式将css变量绑定到图标的颜色属性上。
基础样式代码如下：
/* 图标字体基础样式 */
.icon-font {
font-family: "iconfont";
font-size: 16px;
/* 使用css变量作为颜色值 */
color: var(--icon-font-default-color);
transition: color 0.2s ease;
}
/* hover 状态样式 */
.icon-font:hover {
color: var(--icon-font-hover-color);
cursor: pointer;
}
/* 禁用状态样式 */
.icon-font.disabled {
color: var(--icon-font-disabled-color);
cursor: not-allowed;
}
对应的html使用示例：
<span class="icon-font"></span> <span class="icon-font"></span> <span class="icon-font disabled"></span>
动态修改图标字体颜色
当需要切换主题或者调整整体配色时，只需要修改:root下的css变量值，所有使用对应变量的图标字体颜色都会自动更新，不需要逐个修改样式。
动态修改变量的方式有两种，一种是通过css直接覆盖根作用域的变量，另一种是通过JavaScript修改。
通过css覆盖变量
如果是暗色主题的场景，可以在暗色主题的选择器下重新定义变量：
/* 暗色主题下的变量覆盖 */
.dark-theme {
--icon-font-default-color: #e5e5e5;
--icon-font-hover-color: #40a9ff;
--icon-font-disabled-color: #666666;
}
通过JavaScript修改变量
如果需要动态切换颜色，可以通过JavaScript操作根元素的样式：
// 修改根作用域下的图标默认颜色变量
document.documentElement.style.setProperty('--icon-font-default-color', '#ff4d4f');
// 修改hover状态颜色变量
document.documentElement.style.setProperty('--icon-font-hover-color', '#ff7875');
方案优势与注意事项
使用css变量统一管理图标字体颜色的优势主要有三点：
- 维护成本低，颜色值修改只需要改一处，所有关联样式自动更新
- 可读性强，变量名可以直观体现颜色的用途，比硬编码的颜色值更容易理解
- 扩展性好，新增状态颜色只需要新增对应的css变量，不需要修改原有样式逻辑
需要注意的问题是，css变量的兼容性在IE浏览器上不支持，如果需要兼容IE项目，需要额外添加降级处理，比如同时写死默认颜色值作为备用：
.icon-font {
color: #333333; /* 兼容不支持css变量的浏览器 */
color: var(--icon-font-default-color);
}
另外，css变量的作用域是遵循css层叠规则的，如果在局部作用域定义了同名变量，会覆盖全局变量的值，使用时需要注意变量的作用范围，避免意外的样式覆盖。
适用场景
这种方案适合大多数需要统一管理图标样式的项目，尤其是中大型前端项目、需要支持主题切换的项目、或者图标数量较多的项目。如果项目图标数量极少且不需要后续调整，也可以根据实际情况选择更简单的硬编码方式，但通常推荐使用css变量的方案来提升项目的可维护性。