Appearance

如何在 CSS 中使用图标 ​

在 CSS 中使用图标非常简单：将图标设置为背景或遮罩图像，并在 HTML 中使用简单的 <span> 元素来渲染图标。

如果你想跳过关于其工作原理的长篇解释，可以直接跳转到可用工具列表。

优势 ​

与在 HTML 中使用 SVG 相比，在 CSS 中使用 SVG 既有优势也有劣势。

优势：

  • 无重复。每个图标只需定义一次。
  • 不会产生深层 DOM 树。
  • 可以使用来自不可信来源的图标，因为即使 SVG 中包含脚本，它们也不会被执行。

然而，它也存在一些劣势：

  • 无法定位图标内部的元素，例如修改 stroke-width。
  • 无法使用带动画的图标，除非是无限循环动画的图标。详见下文。

图标的渲染方式 ​

图标分为两种类型：

  • 具有固定配色的图标。
  • 可改变颜色的单色图标。

这两种类型都可以在 CSS 中使用。

带配色的图标 ​

具有固定配色的图标可以渲染为背景图像：

html<span class="background-demo"></span>
<span class="background-demo background-demo--2"></span>
css.background-demo {
   /* Add dimensions to span */
   display: inline-block;
   width: 32px;
   height: 32px;
   /* Add background image */
   background-image: url('https://api.iconify.design/fluent-emoji-flat/alarm-clock.svg');
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.background-demo--2 {
   background-image: url('https://api.iconify.design/fluent-emoji-flat/memo.svg');
}

渲染为内容 ​

具有固定配色的图标也可以渲染为伪元素的内容。

这与将图标用作背景图像类似，但有一个区别：无法通过 CSS 控制图标的尺寸。 你需要在 SVG 中以像素为单位设置宽度和高度。

html<span class="content-demo"></span>
<span class="content-demo content-demo--2"></span>
css.content-demo::after {
   content: url('https://api.iconify.design/bi/bell-fill.svg?height=32&color=gray');
}

.content-demo--2::after {
   content: url('https://api.iconify.design/fluent-emoji-flat/memo.svg?height=32');
}

将图标渲染为伪元素内容而非背景图像并没有明显的优势。

单色图标 ​

单色图标可以渲染为遮罩图像，并将背景颜色设置为 currentColor：

html<span class="mask-demo"></span>
<span class="mask-demo"></span>
<span class="mask-demo mask-demo--2"></span>
<span class="mask-demo mask-demo--2"></span>
<span class="mask-demo mask-demo--3"></span>
<span class="mask-demo mask-demo--3"></span>
css.mask-demo {
   /* Add dimensions to span */
   display: inline-block;
   width: 32px;
   height: 32px;
   /* Add background color */
   background-color: currentColor;
   /* Add mask image, use variable to reduce duplication */
   --svg: url('https://api.iconify.design/bi/bell-fill.svg');
   -webkit-mask-image: var(--svg);
   mask-image: var(--svg);
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
}

.mask-demo--2 {
   --svg: url('https://api.iconify.design/carbon/edit-off.svg');
}

.mask-demo--3 {
   --svg: url('https://api.iconify.design/carbon/humidity.svg');
}

使用 currentColor 作为背景颜色，可以通过更改文本颜色轻松改变图标颜色。

工具 ​

如何在 Iconify 生态系统中为图标生成 CSS？

有几种方法可以实现：

自定义插件 ​

想要构建一个生成 CSS 的自定义插件吗？

Iconify Utils 包包含了你所需的所有函数。生成 CSS 的过程非常简单：

以下代码示例可能会对你有所帮助：

带动画的图标 ​

不建议在 CSS 中使用带动画的图标。

问题在于动画计时器。

通常我们会期望动画在图标渲染时开始，但在 CSS 中并非如此。

在用于背景和遮罩图像的 CSS 中，动画计时器会在图标首次渲染时启动，随后该计时器将用于该图标的所有实例。 动画计时器无法重置。