如何创建自定义字体图标？答案

【问题标题】：How to create custom font icons?如何创建自定义字体图标？
【发布时间】：2015-05-29 03:07:30
【问题描述】：

我想在我的项目中添加一些自定义字体图标。因为引导程序中的默认图标是不够的。如何在 bootstrap 中创建自定义字体图标？

【问题讨论】：

标签： twitter-bootstrap fonts font-awesome webfonts

【解决方案1】：

Fontcustom 将有助于从舒适的命令行生成自定义图标网络字体。您的图标应为 svg 格式。

安装：

sudo apt-get install fontforge wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip unzip woff-code-latest.zip -d sfnt2woff cd sfnt2woff make sudo mv sfnt2woff /usr/local/bin/ gem install fontcustom
创建字体图标的步骤
1. 将所有 svg 文件复制到一个目录中。
2. 执行fontcustom config /path/to/vectors。它将生成 .yml 文件
3. 执行fontcustom compile /path/to/vectors。它使用字体和样式表生成app 目录。

【讨论】：

【解决方案2】：

如何从现有字体创建自定义字体图标（和字形名称）

从免费来源获取您要使用的字体，例如http://fontello.com/；或使用 https://fontforge.github.io/en-US/ 等库创建/修改字体 - 您还可以使用它来重命名字体、添加自己的版权或重新生成字体 ID。
您可以使用以下库从字体本身读取字形名称和字形代码：https://github.com/PhenX/php-font-lib 并（可选）将信息保存为 JSON 或 CSS -或- 您可以使用您的字体编辑随附的 CSS 文件，在您最喜欢的文本编辑器中批量替换您想要的字体系列名称和字体类别名称。
使用适当的@font-face 来源，但woff 得到广泛支持。
请记住维护与您在 CSS 中指定的字形名称相对应的正确字形代码（通常是 unicode） - 您可以生成一次并保存为 CSS 文件，- 或即时生成 -使用 JavaScript 并以 <style> 的形式注入 DOM <head>。

您可以编辑（或创建）您的 CSS 以识别您的字形类，而无需使用重复的单词，例如 icon icon-smile，如下所示：

用于使用较短类名的图标字体 CSS

@font-face
{
    font-family: 'Some_Font';
    src: url('fnt/Some_Font.woff?v=0.1.0') format('woff');
}

[class^="icon-"]:before, [class*=" icon-"]:before
{
    font-family: "Some_Font";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-smile:before{content:'\eAA0';}

现在您可以简单地使用您的自定义字形，而无需像这样复制字体名称：

<i class="icon-smile"></i>

在命名字体和类时请自行决定。

【讨论】：

【解决方案3】：

试试 icomoon，它可以让您使用纯 svg 文件创建我们自己的自定义字体图标。

完整解释见https://impressto.net/creating-font-icons

【讨论】：