Question

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

Answer 1

Fontcustom将有助于从命令行中生成自定义图标webfonts。您的图标应采用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/;或使用诸如https://fontforge.github.io/en-US/之类的库创建/修改字体 - 您也可以使用它来重命名字体，添加自己的版权或重新生成字体ID。
您可以使用以下库来读取字体本身的字形名称和字形代码：https://github.com/PhenX/php-font-lib和（可选）将信息保存在JSON或CSS中 -OR - 您可以编辑随附字体的随附CSS文件，批量替换您喜欢的font-family-name和font-class-names-在您喜欢的文本编辑器中。
按照指示使用相应的@font-face来源，但woff受到广泛支持。
请记住保持正确的字形码（通常是unicode）对应于您在CSS中指定的字形名称 - 您可以生成一次并保存为CSS文件，或者生成on-the-使用JavaScript进行操作，并将<head>注入到<style>。

您可以编辑（或创建）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>

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

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

2 个答案:

如何从现有字体

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