Appearance

图标颜色 ​

本教程是 Iconify SVG 框架教程 的一部分。

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

要更改单色图标的颜色，只需更改文本颜色即可。

All icons inside this div are light blue, including an umbrella icon and attachment icon
All text and icons inside this div are orange, including a hourglass icon and a briefcase icon
Red home icon:
Icon with palette:
html<div class="light-blue-block">
   All icons inside this div are light blue, including an umbrella icon
   <span class="iconify-inline" data-icon="ion:umbrella-sharp"></span>
   and attachment icon
   <span class="iconify-inline" data-icon="entypo-attachment"></span>
</div>
<div class="orange-block">
   All text and icons inside this div are orange, including a hourglass icon
   <span class="iconify" data-icon="bx:bx-hourglass" data-inline="true"></span>
   and a briefcase icon
   <span
       class="iconify"
       data-icon="bx:bxs-briefcase-alt"
       data-inline="true"
   ></span>
</div>
<div>
   Red home icon:
   <span class="iconify iconify-inline" data-icon="bx:bx-home"></span>
</div>
<div>
   Icon with palette:
   <span class="iconify iconify-inline" data-icon="noto:paintbrush"></span>
</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 .iconify {
   color: #08f;
}
// Change icon "bx:bx-home" to #e00
.iconify[data-icon='bx:bx-home'] {
   color: #e00;
}
// Failed attempt to change icon "noto:paintbrush" to #0e0
.iconify[data-icon='noto:paintbrush'] {
   color: #0e0;
}

颜色仅适用于没有调色板的图标。具有调色板的图标（如上面示例中的 noto:paintbrush）的颜色无法更改。

演示解析 ​

在上面的演示中，某些图标具有 class="iconify-inline"，但在样式表中它们是通过 .iconify 进行定位的。这需要稍作解释。

当图标由 Iconify SVG 框架渲染时，所有图标都会获得 "iconify" 类，即使原本没有。这意味着如果占位符具有 class="iconify-inline"，则 <svg> 将具有 class="iconify iconify-inline"（以及其他一些额外的类）。所有自定义类也会从占位符传递到 <svg>。

为什么图标使用 class="iconify-inline"？这在 内联模式教程 中有详细说明。

设置颜色的各种方法 ​

您可以像更改文本颜色一样更改图标颜色。

上面的示例展示了如何使用样式表更改颜色。

您也可以使用内联样式更改颜色：

html<span class="iconify" data-icon="ion:umbrella-sharp" style="color: red"></span>

定位特定图标 ​

要定位特定图标，您可以：

按名称定位图标 ​

css.iconify[data-icon='mdi:home'] {
   color: red;
}

这会将所有具有 data-icon="mdi:home" 的图标的颜色更改为红色。

按前缀定位图标 ​

css.iconify--mdi {
   color: red;
}

当 SVG 框架渲染 <svg> 时，它会将当前提供者和前缀添加到类列表中。请参阅下面的演示。

自定义类 ​

您可以向占位符添加自定义类：

html<span class="iconify red-icon" data-icon="mdi:home"></span>

然后您可以通过该类名定位图标：

css.red-icon {
   color: red;
}

示例 ​

html<span class="iconify red-icon" data-icon="mdi:home"></span>
占位符 HTML
html<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   aria-hidden="true"
   focusable="false"
   role="img"
   class="iconify iconify--mdi red-icon"
   width="1em"
   height="1em"
   preserveAspectRatio="xMidYMid meet"
   viewBox="0 0 24 24"
   data-icon="mdi:home"
>
   <path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"></path>
</svg>
渲染后的 SVG
css/* Target icon by full name */
.iconify[data-icon='mdi:home'] {
   color: red;
}

/* Target icon by prefix */
.iconify--mdi {
   color: red;
}

/* Target icon by extr class */
.red-icon {
   color: red;
}

RGBA 和 HSLA 颜色 ​

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

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

fill 和 stroke ​

避免在样式表中使用 fill 和 stroke，除非你是为特定图标使用它们。

并非所有图标都相同。有些图标使用 fill 来定义形状，有些则使用 stroke。如果设置了 fill，可能会导致本不应填充的形状被填充。