将所有Glyphicons添加到Bootstrap 3

Question

我很喜欢Bootstrap 3中的Glyphicons，但它们好像不完整！我真的很想使用建筑物图标，但是Google没有找到什么有用的信息。

有人知道如何将缺失的Glyphicons添加到Bootstrap 3中吗？

- lowe0292

---

我正在查看Bootstrap 3和2.x的Glyphicons，但我没有看到任何类似建筑物的图标。您认为有Glyphicon建筑物的依据是什么？ - James A Mohler

@JamesMohler，我指的是在这里列出的建筑图标。只需搜索“building”，它就是唯一的结果。 - lowe0292

Bootstrap 包含来自 Halflings 集合的 200 种字体。Glyphicons Halflings 通常不免费，但它们的创建者已经免费提供了它们给 Bootstrap 使用。 - Mike Causer

建筑图标在完整的Glyphicons Pro集合中存在。 - Mike Causer

如果您愿意使用.png而不是矢量Web字体，建筑图标可在Glyphicons Free集中获得。glyphicons_089_building.png - Mike Causer

Answer 1

您可以使用免费服务http://fontello.com/创建自己的自定义字体。只需将您的glyphicons-halflings-regular.svg文件拖入，选择要使用的图标并下载仅包含您所需内容的自定义字体即可。

Fontello预装了以下库：

• Fontelico
• Font Awesome
• Entypo
• Typicons
• Iconic
• Modern Pictograms
• Meteocons
• MFG Labs
• Maki
• Zocial
• Brandico
• Elusive
• Linecons
• Web Symbols

您还可以以59美元购买Glyphicons的完整版本，网址为http://glyphicons.com/。

- Mike Causer

---

那么您的意思是，如果我用Glyphicons的完整版本替换我的字体文件夹中的glyphicons-halflings-regular.svg，那么我就可以使用与其他Bootstrap 3 glyphicons相同的语法来使用附加的图标吗？（例如，<span class="glyphicon glyphicon-building"></span>） - lowe0292

要使用完整的图标集，您需要将提供的类添加到您的glyphicons.less或bootstrap.css文件中。我在http://glyphicons.com/上搜索并发现建筑图标使用`UTF+E090`，因此您需要添加`.glyphicon-building { &:before { content: "\e090"; } }`。 - Mike Causer

一个替代 Fontello 的选择是 IcoMoon。 - Mike Causer

Answer 2

我想使用我购买的Glyphicons Pro，但是在bootstrap中展开当前的halflings东西很混乱。因此，我为每个图标集（full、filetypes和social）创建了单独的css文件，并复制了bootstrap初始化它们的方式，以便我可以使用类似的语法。

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

这样，您可以在需要时仅加载所需文件，并且可以使用原始的bootstrap配置。在此处找到我的文件：Gist@GitHub

- Jelby-John

---

此外，关于图标的参考，请查看我为每个图标创建的PDF文件... [PDF文件]（http://bit.ly/V7VHnF） - Jelby-John

Answer 3

我已经从http://glyphicons.com/购买了完整的Gylphicons套装，并希望使用所有可用的图标。如果您使用的是较少的图标，则可能需要进行一些不同的操作，我不知道。

在尝试了此线程和其他stackexchange网络上发布的各种方法后，我所做的并对我有效的是：

(1)备份我的原始bootstrap.css文件（我已修改过我的文件，这是个好主意）

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

(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) 如果您想要像我一样使用所有字形，则打开标记为glyphicons.css的/web/html_css/css/目录中的文件，并复制除了@font-face{}和.glyphicon{}部分以外的所有glyhicons的CSS，并粘贴到空文本文档中。

(5) 您需要进行搜索和替换（我是这样做的），将.glyphicons替换为.glyphicon，注意末尾没有（s）。

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

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

(8) 快乐地使用Glyphing！

注意：现在您应该设置好使用所有glyhpicons了。只需记住，一些glyphicons的名称与原始的bootstrap文件中不同。

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

- Kyle Coots

Answer 4

最简单的方法是创建一个自定义的 .png 文件，然后像平常一样使用 CSS。

- brandrich

---

@DanieleBrugnara，请问您可以解释一下为什么吗？谢谢！ - candlejack

@candlejack：SVG（请参见示例中的fontello） - Daniele Vrut

人们使用Glyphicons是因为您可以自由更改其大小或颜色，而无需每次更改图标本身。 - Marcio

PNG已经过时了。使用附加为字体的SVG图标要容易得多。 - David