在纯 CSS 中使用内联 SVG 而不是 font-awesome webfont答案

【问题标题】：Use inline SVG instead of font-awesome webfont in pure CSS在纯 CSS 中使用内联 SVG 而不是 font-awesome webfont
【发布时间】：2019-01-09 04:13:09
【问题描述】：

我正在为静态站点生成器使用基于 bulma 的模板，并且我希望删除对 Javascript 和第三方托管的任何资源的任何依赖关系，以及通常最小化的内容。

该模板使用font awesome 来处理一些涉及的图标，但实际上总共只有大约 5-10 个图标，所以我打算将它们作为 SVG 内联，而不是加载整个网络字体。但是，我不确定如何通过纯 CSS 尽可能接近替换这几个图标。

这是 HTML 的最小工作示例：

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<ul style="list-style: none">
  <li>
    <a href="https://example.com">
      <span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
      <span>Example</span>
    </a>
  </li>
  <li style="font-size: 20px">
    <a href="https://example.com">
      <span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
      <span class="link-text">Example</span>
    </a>
  </li>
  <li style="font-size: 40px">
    <a href="https://example.com">
      <span style="align-items:center; justify-content:center"><i class="fa fa-globe fa-fw"></i></span>
      <span class="link-text">Example</span>
    </a>
  </li>
</ul>

如果我将它与 fontawesome CSS 一起使用（请参阅this JSfiddle），请在前面加上：

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

我得到一个随字体大小缩放的图标，颜色与字体大小相同，并且相对于文本垂直居中。但是，如果我使用内联 SVG（请参阅 this JSFiddle），使用此 CSS：

.fa-globe::before {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzY0LjIxNSAxOTJoMTMxLjQzYzUuNDM5IDIwLjQxOSA4LjM1NCA0MS44NjggOC4zNTQgNjRzLTIuOTE1IDQzLjU4MS04LjM1NCA2NGgtMTMxLjQzYzUuMTU0LTQzLjA0OSA0LjkzOS04Ni43NDYgMC0xMjh6TTE4NS4yMTQgMzUyYzEwLjY3OCA1My42OCAzMy4xNzMgMTEyLjUxNCA3MC4xMjUgMTUxLjk5Mi4yMjEuMDAxLjQ0LjAwOC42NjEuMDA4cy40NC0uMDA4LjY2MS0uMDA4YzM3LjAxMi0zOS41NDMgNTkuNDY3LTk4LjQxNCA3MC4xMjUtMTUxLjk5MkgxODUuMjE0em0xNzQuMTMtMTkyaDEyNS4zODVDNDUyLjgwMiA4NC4wMjQgMzg0LjEyOCAyNy4zMDUgMzAwLjk1IDEyLjA3NWMzMC4yMzggNDMuMTIgNDguODIxIDk2LjMzMiA1OC4zOTQgMTQ3LjkyNXptLTI3LjM1IDMySDE4MC4wMDZjLTUuMzM5IDQxLjkxNC01LjM0NSA4Ni4wMzcgMCAxMjhoMTUxLjk4OWM1LjMzOS00MS45MTUgNS4zNDUtODYuMDM3LS4wMDEtMTI4ek0xNTIuNjU2IDM1MkgyNy4yNzFjMzEuOTI2IDc1Ljk3NiAxMDAuNiAxMzIuNjk1IDE4My43NzggMTQ3LjkyNS0zMC4yNDYtNDMuMTM2LTQ4LjgyMy05Ni4zNS01OC4zOTMtMTQ3LjkyNXptMjA2LjY4OCAwYy05LjU3NSA1MS42MDUtMjguMTYzIDEwNC44MTQtNTguMzk0IDE0Ny45MjUgODMuMTc4LTE1LjIzIDE1MS44NTItNzEuOTQ5IDE4My43NzgtMTQ3LjkyNUgzNTkuMzQ0em0tMzIuNTU4LTE5MmMtMTAuNjc4LTUzLjY4LTMzLjE3NC0xMTIuNTE0LTcwLjEyNS0xNTEuOTkyLS4yMjEgMC0uNDQtLjAwOC0uNjYxLS4wMDhzLS40NC4wMDgtLjY2MS4wMDhDMjE4LjMyNyA0Ny41NTEgMTk1Ljg3MiAxMDYuNDIyIDE4NS4yMTQgMTYwaDE0MS41NzJ6TTE2LjM1NSAxOTJDMTAuOTE1IDIxMi40MTkgOCAyMzMuODY4IDggMjU2czIuOTE1IDQzLjU4MSA4LjM1NSA2NGgxMzEuNDNjLTQuOTM5LTQxLjI1NC01LjE1NC04NC45NTEgMC0xMjhIMTYuMzU1em0xMzYuMzAxLTMyYzkuNTc1LTUxLjYwMiAyOC4xNjEtMTA0LjgxIDU4LjM5NC0xNDcuOTI1QzEyNy44NzIgMjcuMzA1IDU5LjE5OCA4NC4wMjQgMjcuMjcxIDE2MGgxMjUuMzg1eiIvPjwvc3ZnPg==");
}

图标相对于文本没有垂直居中，并且与文本颜色不同。将内联 SVG 视为替代字体真棒字形的最佳方法是什么没有 javascript？（我不太关心“图标颜色错误”，而是它们似乎与文本没有很好地对齐，我只是提到它，因为如果有一种方法可以解决这两个问题，我会更喜欢那个）。

【问题讨论】：

FA 5 的 CSS 版本不使用 SVG，它们使用常见的 font-family 技巧
@TemaniAfif 是的，我知道。我根本不想在我的页面上使用任何第三方资源，也不想只为 5-6 个图标提供完整的网络字体，所以我想有选择地使用 SVG。不使用第三方资源的原因很大程度上是我不切实际的不妥协——因为 I 使用第三方资源白名单浏览我想支持这种操作模式，即使它可能会由于以下原因导致一些性能损失缓存未命中。
所以我的建议是运行 SVG 版本...检查代码并获取您获得的 svg 并使用它
为什么不在您的网站上本地存储字体真棒文件，这样就不再需要第 3 方，而无需摆弄替代品
可以打开编辑FA，去掉不需要的字形保存；这很容易完成。 Google it.

标签： html css

【解决方案1】：

也许this 资源可能对您有用。 IcoMoon 有大量免费图标可供选择，包括社交网络，如果您点击“生成 svg”，则可以选择“获取代码”并将 html 和 css 直接复制/粘贴到您的网站中。

要更改图标颜色和布局，您只需更改刚刚抓取的 css。比如：

`
.icon {
display: flex;
align-items: center;
color: #whatever-text-color;
}
`

这是一个无 JS 的example，你可以玩。如果您使用 sass 变量来控制字体大小，您还可以将图像连接到该变量以保持所有内容一起缩放。

使用 SVG 而不是使用 font-awesome 的唯一问题是旧的/古老的 IE 浏览器缺乏对 svg 的支持。其他一切都是可靠的胜利 - 更少的 http 请求、更少的文件大小、更少的依赖项。

希望这会有所帮助:)

编辑额外小费。对于带有内联 svg 的动画，将类或 id 放在 PATH 标记上并为其设置动画。对于旋转，您可能还需要： transform-origin: center;因为它默认围绕右上角旋转。如果您有一个包含多个路径的 svg，您可以单独为它们设置动画并开始变得非常时髦。

【讨论】：

【解决方案2】：

在您的小提琴https://jsfiddle.net/ks392fzv/6/ 中，如果您在 .fa-globe::before 类中将 content 设置为 content: "\00a0\00a0"，它将提供 i 内容，并且该元素现在可以通过基线。

.fa-globe::before {
  content: '\00a0\00a0';
  ...

我将你的小提琴分叉并在此处进行了小改动：https://jsfiddle.net/ndebellas/y4dLcqkx/。

【讨论】：