twitter-bootstrap - 如何从 glyphicons.com (png 文件)添加额外的字形图标到 bootstrap 3？

Question

我知道如何使用标准字形，但我想使用来自: http://glyphicons.com/ 的附加字形直接链接到免费版本:http://glyphicons.com/files/glyphicons_free.zip

我的 Bootstrap 的结构如下所示:

    ➜  bootstrap-3.1.1-dist  tree
    .
    ├── css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   └── bootstrap.min.css
    ├── fonts
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   └── glyphicons-halflings-regular.woff
    └── js
        ├── bootstrap.js
        └── bootstrap.min.js

3 directories, 12 files

下载目录的结构如下所示:

    ➜  glyphicons_free  tree

        .
        ├── _changelog.txt
        ├── _readme_first.txt
        ├── glyphicons
        │   └── png
        │       ├── glyphicons_000_glass.png
            . . .
        │       └── glyphicons_469_server_new.png
        └── glyphicons_social
            └── png
                ├── glyphicons_social_00_pinterest.png
            . . .
                └── glyphicons_social_49_ios.png

4 directories, 522 files

我应该把这个 png 文件放在哪里？我应该如何引用它们？

Answer 1

我通常使用icomoon应用程序将 svg 文件转换为字体。

PNG 不会给你最好的结果，你需要获取 AI 或其他矢量源的图像源，将它们转换为 svg 并将其输入到这个应用程序中，你就可以获得你的字体。

我认为您无法在没有源的情况下重新打包 Bootstrap 字体，除非您使用添加的字形和所有现有的 Bootstrap 字体创建新的字体。您可以在这里获取其来源:Glyphicons虽然不是免费的。