不导入字体Awesome图标代码如何使用？

Question

我想使用 Font Awesome 中的图标，就像这样：

<i class="fa fa-user" aria-hidden="true"></i>

但是，如果我包含font awesome字体，由于某些原因，我使用的另一种字体也会出现问题，并且加载时间较慢。因此，我想仅使用实际fa fa-user的代码，这样我就不需要为一个图标导入所有这些内容！

我试图寻找解决方案，但我没有成功？这是否可能做到？

- Ritchie

Answer 1

您可以使用这个简单的图片http://images.time2hack.com/fa-user.png代替include。缺点是您可能需要更多的CSS。 :)

- N. Smeding

---

Font Awesome 的美妙之处在于您可以对其应用 CSS 样式。如果 OP 在页面上有 30 个不同的 fa-user 图标，所有图标都略有不同的样式，您是否期望 OP 必须创建 30 张单独的图片？ - James Donnelly

Answer 2

当下载字体时，你不能只包含其中一个图标；必须下载整个字体才能使用任何图标。但是，你可以告诉浏览器你想要使用的Unicode范围。

在Font-Awesome的情况下，fa-user图标位于U+F007，因此如果你只想包含该图标，则只需在unicode-range属性中指定它即可。

@font-face {
  font-family: 'FontAwesome';
  unicode-range: U+F007;
}

话虽如此，Font Awesome 是一个特例，因为作者经营了几个服务，允许您定制包括哪些图标。在 GitHub 上，他们有一篇关于此的 Wiki 条目：自定义 Font Awesome。

- James Donnelly