返回
iconfont 图标颜色更改指南：修复 symbols 文件更新后的颜色问题
前端
2023-10-03 19:35:27
iconfont的symbols文件更新后，icon不能变色问题
问题
更新iconfont的symbols文件后，无法通过样式修改svg图标的颜色。
问题原因
当从阿里图库中将图标添加到项目中时，如果已编辑过项目图标的颜色或图标本身是有颜色的，则通过symbol获取图标时，图标的颜色不会发生变化。
解决方法
方法 1：清除浏览器缓存
- 打开浏览器，按“Ctrl + Shift + R”（Windows）或“Command + Shift + R”（Mac）刷新页面。
- 如果仍然无法更改颜色，请转到“设置”并清除浏览器缓存和Cookie。
方法 2：使用CSS覆盖
- 在CSS文件中，使用
<svg>选择器覆盖图标的默认颜色。 - 设置
fill属性为所需的颜色。
例如：
svg {
fill: #00FF00;
}
方法 3：使用内联样式
- 在使用图标的HTML元素中，使用内联样式覆盖图标的颜色。
- 设置
fill属性为所需的颜色。
例如：
<svg fill="#00FF00">
...
</svg>
方法 4：重新下载symbols文件
- 从iconfont网站重新下载symbols文件。
- 覆盖项目的symbols文件。
- 刷新页面。
方法 5：使用代码生成工具
- 使用iconfont提供的代码生成工具生成新的图标代码。
- 将新代码复制到您的项目中。
注意事项
- 如果使用CSS覆盖，确保覆盖的样式具有更高的优先级。
- 如果使用内联样式，确保将样式应用于正确的图标元素。
- 重新下载symbols文件后，请清除浏览器的缓存。
扩展阅读
代码示例
方法 1：使用CSS覆盖
.icon-svg {
fill: #00FF00;
}
方法 2：使用内联样式
<svg class="icon-svg" fill="#00FF00">
...
</svg>
关键词：
iconfont 的 symbols 文件更新后，用户在使用 SVG 图标时可能会遇到无法更改图标颜色的问题。本文提供了五种解决方法，包括清除浏览器缓存、使用 CSS 覆盖、使用内联样式、重新下载 symbols 文件以及使用代码生成工具。
文章
总结
通过遵循本文提供的解决方案，您可以轻松解决 iconfont symbols 文件更新后无法更改图标颜色的问题。这些解决方案适用于各种场景，包括使用 CSS 覆盖、内联样式和代码生成工具。
