html - 如何在具有 CSS 类的按钮中显示 Bootstrap 4 SVG 图标？

Question

我在我的按钮中使用 Bootstrap 4 的 SVG 图标。我将使用 SVG 的代码硬编码到页面的 HTML 中。现在我想将 SVG 重构为一个 CSS 类。我已按照 Bootstrap 4 说明创建 CSS 类，但我无法弄清楚如何在我的按钮上显示图标。我尝试了很多变体都没有成功。
CSS:

.bi::before {
    display: inline-block;
    content: "";
    background-image: url('data:image/svg+xml,<svg width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"><path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"></svg>');
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
}

HTML:

<a href="#" class="btn bi" role="button" download></a>

非常感谢您的帮助。

Answer 1

好吧，要使您的代码正常工作，您应该考虑一些注意事项。

首先，<path> SVG 中的元素没有任何结束标记，因此它会在 data 属性中产生错误，并且会阻止显示图标。

为了使您的 SVG 响应友好并填充容器中的可用空间，最好避免使用 width和 height直接在 SVG 元素中使用 preserveAspectRatio="none" 反而。

最好对您的 SVG 元素进行编码，而不是将其直接放在 data:image/svg 中为交叉浏览目的提供有效的字符串格式。您可以使用类似 this 的工具为事业。

根据上面的注释，你的最终代码应该是这样的:

.bi::before {
  content: "";
  display: inline-block;
  background-image: url('data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M.5%209.9a.5.5%200%200%201%20.5.5v2.5a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1v-2.5a.5.5%200%200%201%201%200v2.5a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2v-2.5a.5.5%200%200%201%20.5-.5z%22%20%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7.646%2011.854a.5.5%200%200%200%20.708%200l3-3a.5.5%200%200%200-.708-.708L8.5%2010.293V1.5a.5.5%200%200%200-1%200v8.793L5.354%208.146a.5.5%200%201%200-.708.708l3%203z%22%20%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  width: 2rem;
  height: 2rem;
}

<a href="#" class="btn bi" role="button" download></a>

注意:您还可以在元素中创建一个 SVG 文件，然后像常规图像一样直接在背景图像属性中引用它，以便于使用。