图标颜色

本教程是 Iconify Icon Web 组件教程 的一部分。

您只能更改单色图标的颜色。某些图标（例如表情符号）具有无法更改的硬编码配色方案。

要更改单色图标的颜色，只需更改文本颜色，或使用 color 属性，或添加带有颜色的 style。

All icons inside this div are light blue, including a bell icon and attachment icon

This text and icon are orange:

Red home icons (shows different ways to change color):

Icon with palette:

html<div class="light-blue-block">
   All icons inside this div are light blue, including a bell icon
   <iconify-icon inline icon="bi:bell-fill"></iconify-icon>
   and attachment icon
   <iconify-icon inline icon="bi:stopwatch"></iconify-icon>
</div>
<div class="orange-block">
   This text and icon are orange:
   <iconify-icon inline icon="bi:bell-fill"></iconify-icon>
</div>
<div>
   Red home icons (shows different ways to change color):
   <iconify-icon inline class="red-icon" icon="bx:bx-home"></iconify-icon>
   <iconify-icon inline style="color: red" icon="bx:bx-home"></iconify-icon>
</div>
<div>
   Icon with palette:
   <iconify-icon inline icon="noto:paintbrush"></iconify-icon>
</div>

css// Change text color for ".orange-block" to #e70
.orange-block {
   color: #e70;
}
// Change all icons inside ".light-blue-block" to #08f
.light-blue-block svg {
   color: #08f;
}
// Change text color for ".red-icon" to #e00
.red-icon {
   color: #e00;
}

颜色仅适用于没有调色板的图标。带有调色板的图标（如上方示例中的画笔图标）的颜色无法更改。

更改颜色的方法与更改文本颜色的方法相同。

RGBA 和 HSLA 颜色

避免使用 rgba 和 hsla 颜色。某些图标包含多个相互叠加的图层。使用半透明颜色会导致各图层均可见。

相反，请使用纯色，并通过 opacity 添加透明度。这样浏览器会先以纯色渲染形状，然后再对整个图标应用透明度。