Question

所以我的确切问题源于这样一个事实：我无法为我的一个图标制作矢量图标。我有这个图标作为图像文件，但如果我尝试使用光栅矢量图像转换它，它看起来很可怕。由于我无法将其作为矢量svg文件，因此无法将其作为真棒字体的一部分。

现在我的真正问题。使用指令

显示图标

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

此变量部分根据我的API响应而更改。对于所有其他图标，它将起作用。但是，由于显而易见的原因，我希望它不会以令人敬畏的字体找到它。因此当它遇到“icon-custom”时，我希望css采用令人敬畏的字体，通常显示类似

的内容

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

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

这对css来说是否可能？我知道有一种方法可以在bootstrap sprite中使用variables.less来加载自定义字形。但现在似乎不太可能。那么我有办法做到这一点吗？

Answer 1

首先，你需要将你的图标打包成一个字体文件，就像font-awesome一样。您的图标需要采用矢量格式。

字体自定义是一种将SVG图像转换为您自己的字体图标集的工具。它需要从brew或apt-get（仅适用于Mac和Linux）安装几个软件包，然后使用gem来查看目录并构建字体。