twitter-bootstrap-3 - 将所有 Glyphicons 添加到 Bootstrap 3

Question

我正在挖掘 Bootstrap 3 中的 Glyphicons，但看起来它们并不全部存在！我真的很想使用建筑图标，但谷歌搜索并没有发现太多东西。

有谁知道如何将缺少的 Glyphicons 添加到 Bootstrap 3？

Answer 1

您可以使用免费服务构建自己的自定义字体：http: //fontello.com/

只需将您的glyphicons-halflings-regular.svg文件拖入，选择您要使用的图标并下载仅包含您需要的自定义字体。

Fontello 预装了以下库：

• 丰泰利科
• 字体真棒
• 打字机
• 典型代表
• 标志性的
• 现代象形图
• 气象局
• MFG 实验室
• 真希
• 佐夏尔
• 布兰迪科
• 难以捉摸
• 线控
• 网络符号

您还可以在http://glyphicons.com/上以 59 美元的价格购买完整版的 Glyphicons

Answer 2

我想使用我买的 Glyphicons Pro，但是在 bootstrap 中扩展当前的半身人东西很麻烦。因此，我为每个图标集（完整、文件类型和社交）创建了一个单独的 css 文件，并复制了引导程序初始化它们的方式，以便我可以使用类似的语法。IE

<span class="glyphpro glyphpro-download"></span>
<span class="glyphfiles glyphfiles-xml"></span>
<span class="glyphsocial glyphsocial-github"></span>

这样你就可以只加载你想要的并且在你想要的时候加载，你可以使用 vanilla bootstrap 配置。在这里找到我的文件：Gist@GitHub

Answer 3

我从http://glyphicons.com/购买了完整的 Gylphicons 集，并希望使用所有可用的图标。如果您使用较少，您可能需要做一些我不知道的不同的事情。

在尝试了从该线程和 stackexchange 网络上的其他线程发布的各种内容之后，我为我所做的和为我工作的内容如下：

（1）备份了我原来的bootstrap.css文件（我已经修改了我的，加上好主意）

（2）将/web/html_css/fonts目录下所有glyphicons-regular字体文件复制到我的bootstrap字体文件所在的fonts目录下

(3) 从 bootstrap.css 的第 263 行开始进行更改以反映如下：（您的可能略有不同）

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-regular.eot');
  src: url('../fonts/glyphicons-regular.eot?#iefix') 
  format('embedded-opentype'), url('../fonts/glyphicons-regular.woff') 
  format('woff'), url('../fonts/glyphicons-regular.ttf') 
  format('truetype'), url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
}

它们的 url 应该指向新的字体文件。

(4) 如果你想要像我一样的所有字形，那么打开 /web/html_css/css/ 目录中标记为 glyphicons.css 的文件并复制除 @font-face{} 的部分之外的所有 glyhicons 的 css和 .glyphicon{} 并粘贴到空文本文档中。

(5) 您需要对 .glyphicons 进行搜索和替换（我还是这样做了），注意末尾的 (s) 并替换为末尾的 .glyphicon no (s)

(6) 接下来打开 bootstrap.css 文件并注释掉或删除所有其他 .glyphicon-whatever 样式并粘贴新样式。

(7) 您可能需要从文件最底部删除指向 bootstrap.css.map 文件的行。我没有必要，但你可能需要。

(8) 快乐的字形！

注意您现在应该设置为使用所有的 glyhpicons。请记住，字形图标的某些名称与原始引导文件中的名称不同。

我为修改后的 css 文件创建了一个存储库：https ://github.com/snowballrandom/bootstrap

Answer 4

只创建一个自定义 .png 并正常使用 css 会更简单。