时间戳

首页 > 解决方案 > 使用 svg 图标作为背景的最优雅的方式是什么？

css - 使用 svg 图标作为背景的最优雅的方式是什么？

问题描述

我不是前端专家，我的应用程序中只需要几个图标，所以我认为与其依赖像 font-awesome（带有巨大的 css 文件）这样的巨大图标包，我只需编写自己的图标 css。这是我的想法（在 scss 中）：

$icon-width: 24px;
$icon-height: 24px;
.thumbs-up {
  width: $icon-width;
  height: $icon-height;
  &:before {
    content: "   ";
    background: url(/icons/thumbs-up.svg) no-repeat;
    width: 100%;
    height: 100%;
    display: block;
  }
}

我可以thumbs-up像这样在我的 html 中简单地链接使用：

> <p class="thumbs-up" id="like"></p>

这很好用，我想知道这是否有任何缺陷，或者可能有更优雅的方法来做到这一点？

标签： csssassicons

解决方案

检查上下文

这取决于上下文。老实说，这是您示例案例的更好方法。

要在 CSS 或IMG标签之间进行选择，您必须问自己它是否只是纯粹的设计，或者图像是否是上下文的，如果它是内容本身的一部分。

如果只是为了设计，请使用 CSS。如果它是页面所需的上下文，则使用IMG标签，IMG标签带有title和alt参数，当图像无法显示时，将解释图像的上下文，帮助人们使用屏幕阅读器和搜索引擎爬虫。

还有许多其他点两者都不同，但这些仅说明了为什么 CSS 更适合纯设计，而IMG标签用于上下文图像。

额外的 SVG 好东西

SVG 虽然是 XML 文件，但如果您将它们嵌入页面（不是使用IMG标签，而是实际将其 XML 代码粘贴到 html 中），您可以通过 CSS 和 JavaScript 操作它们的元素。

例如查看Gitlab，如果您将鼠标悬停在左上角的徽标上，您会注意到三角形会在鼠标指向的地方发光。这只能通过在页面中嵌入 SVG 代码而不是使用 CSS 或IMG标签来实现。

推荐阅读