Question

我正在挖掘'Bootstrap 3中的Glyphicons，但看起来他们并非全都在那里！我真的很想使用建筑图标，但谷歌搜索并没有发现任何东西。

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

Answer 1

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

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

Fontello预装了以下库：

Fontelico
Font Awesome
Entypo
Typicons
标志性
现代象形图
Meteocons
MFG Labs
希
Zocial
Brandico
难以捉摸
Linecons
网络符号

您还可以在http://glyphicons.com/

以59美元的价格购买完整版的Glyphicons

Answer 2

我想使用我买的Glyphicons Pro，但是扩展当前半身内容的东西是凌乱的。所以我为每个图标集（完整，文件类型和社交）创建了一个单独的css文件，并复制了bootstrap初始化它们的方式，因此我可以使用类似的语法。即。

<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');
}

他们的网址应该指向新的字体文件。

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

（5）你需要为.glyphicons进行搜索和替换（我做了），最后注意（s）并最后用.glyphicon no（s）替换

（6）接下来打开bootstrap.css文件并注释掉或删除所有其他.glyphicon - 无论什么样式并粘贴到新样式中。

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

（8）快乐的雕文！

注意您应该设置为立即使用所有glyhpicons。请记住，一些glyphicons的名称与原始bootstrap文件中的不同。

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

Answer 4

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

将所有Glyphicons添加到Bootstrap 3

4 个答案: