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

Question

我想在我的项目中添加一些自定义字体图标。因为 bootstrap 中的默认图标是不够的。如何在 bootstrap?

中创建自定义字体图标

Answer 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 目录。

Answer 2

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

从免费来源获取您想要使用的字体，例如 http://fontello.com/ ; or create/modify a font using a library such as https://fontforge.github.io/en-US/ - 您还可以使用它来重命名您的字体、添加您自己的版权或重新生成字体id.
您可以使用以下库从字体本身读取字形名称和字形代码：https://github.com/PhenX/php-font-lib 并（可选）将信息保存在 JSON 或 CSS -OR- 您可以编辑附带的 CSS 字体文件，批量替换 font-family-name 和 font-class-您想要的名字-在您最喜欢的文本编辑器中。
按照指示使用适当的 @font-face 来源，但是，woff 得到广泛支持。
记得维护与您在 CSS 中分配的字形名称相对应的正确字形代码（通常是 unicode）-您可以生成一次并另存为 CSS 文件，-或使用 JavaScript 即时生成并作为 <style>.

<head>

您可以编辑（或创建）您的 CSS 以识别您的字形 classes，这样您就不需要使用重复的单词，例如 icon icon-smile，如下所示：

图标字体 CSS 使用较短的 class-names

@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>

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

Answer 3

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

有关完整说明，请参阅 https://impressto.net/creating-font-icons

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

How to create custom font icons?

twitter-bootstrap

fonts

font-awesome

webfonts

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

图标字体 CSS 使用较短的 class-names