Question

我正在为静态网站生成器使用基于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的最佳方法是什么？（我不太关心＆＃34;图标是错误的颜色＆＃34;而不是它们似乎与文本很好地对齐，我只是提到它因为如果有的话解决这两个问题的方法，我更喜欢这个。

Answer 1

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

要更改图标颜色和布局，您只需更改刚刚抓取的css即可。类似的东西：

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

这是一款可以免费使用的JS example。如果你使用sass变量来控制font-size，你也可以将图像挂钩到那里以保持一切缩放。

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

希望这会有所帮助：）

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

Answer 2

在小提琴https://jsfiddle.net/ks392fzv/6/中，如果在.fa-globe :: before类中将content设置为content到content：“ \ 00a0 \ 00a0”，它将提供i内容，并且该元素现在可以对齐按基线。

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

我分叉了你的小提琴，并在这里做了小小的改动：https://jsfiddle.net/ndebellas/y4dLcqkx/。

在纯CSS

2 个答案: