html - 如何在对其他字体使用 font awesome 时仅显示我预定义的 png 图像中的特定图标

Question

所以我的确切问题源于我无法为我的其中一个图标制作矢量图标这一事实。我将该图标作为图像文件，但如果我尝试使用光栅矢量图像转换它，它看起来很糟糕。由于我无法将其设为矢量 svg 文件，因此我无法将其作为超赞字体的一部分包含在内。

现在是我真正的问题。 使用指令显示图标

<i class="icon-{variable name}"></i>

此变量部分根据我的 API 的响应而更改。对于所有其他图标，它将起作用。但是，由于明显的图标原因，我想要它不会以很棒的字体找到它。因此，当它遇到“icon-custom”时，我想要 awesome 字体中的 css，它通常显示类似

.icon-wap:before {
    content: "\f102";
}

指向并加载特定的 .png 文件(我的图标)。

这甚至可以用 css 实现吗？ 我知道有一种方法可以在 bootstrap Sprite 中使用 variables.less 来加载自定义字形。但现在看来这不可能了。 那么有什么办法可以做到这一点吗？

Answer 1

首先，您需要将图标打包到字体文件中，就像 font-awesome 所做的那样。您的图标需要采用矢量格式。

Font Custom 是一种将 SVG 图像转换为您自己的字体图标集的工具。它需要从 brew 或 apt-get(目前仅限 Mac 和 Linux)安装几个包，然后需要一个 gem 来监视目录和构建字体。