Bootstrap css使用Glyphicons中的hallings。如果我购买了他们的完整产品线，我将如何将其纳入引导程序框架？
使用这个CSS精灵生成器，上传zip文件。它将为您创建相关的CSS类（名称取自图像本身），将所有图像合并为一个（透明）PNG类。
您也可以使用Font Awesome解决方案。
可缩放的矢量图形意味着图标在任何大小下都看起来很棒。
从头开始设计，与Twitter Bootstrap 2.0完全向后兼容。
你必须将每个字形图标的背景位置重新计算到你自己的类中，或者覆盖引导程序已经设置的类才能使用它们。Twitter的引导程序使用了14px的半（免费）图标版本，整个图标集的大小是原来的两倍，所以旧的background-position's无法使用。
下面是一个bootstraps图标类的示例：
/* class for the icon "fast-backward", notice the positioning values set in pixels */
.icon-fast-backward {
background-position: -216px -72px;
}
/* main class, defining what icon sheet to use */
[class^="icon-"], [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
line-height: 14px;
vertical-align: text-top;
width: 14px;
}
我也在Github上创建了一个。直到后来才看到马可的帖子。
https://github.com/ekryski/bootstrap-template
据我回忆，Glyphicons并没有将其图标提供为精灵版本（多个图标作为一个图像），而是分别获得每个图标。如果你只打算使用他们的图标，这应该没问题。
最好的方法是创建一个单独的css文件，并继续使用它们的".icon-"命名约定。
.icon-whatever {
background:url('..img/someicon.png') 0 0;
}
默认的背景位置是14px 14px，所以您需要像上面一样将其重置为0 0。
我为Bootstrap创建了一个精灵和CSS插件来提供此功能。回购和说明在Github上。并不是每个图标都有覆盖范围，有些图标仍然有点偏离中心。要使用更大的图标，只需添加icon-large CSS类：
<i class="icon-large icon-search"></i>
这里有一篇关于引导图标的好文章：http://www.themplio.com/twitter-bootstrap-icons
无需合并。您只需添加字形图标，并将其与引导程序附带的hallings一起使用。
添加字形图标（常规设置）如下：
/css/glyphicons.css
/fonts/glyphicons-regular.eot
/fonts/glyphicons-regular.svg
/fonts/glyphicons-regular.ttf
/fonts/glyphicons-regular.woff
/fonts/glyphicons-regular.woff2
您应该为css基类.glyphicons提供与引导.glyphicon 相同的样式
.glyphicons {
position:relative;
top:2px;
display:inline-block;
font-family:'Glyphicons Regular';
font-style:normal;
font-weight:normal;
line-height:1;
vertical-align:top;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
接下来，将字形图标的引用添加到您的页面中，如下所示：
<link href="/css/glyphicons.css" rel="stylesheet" />
现在，使用完整的"常规"字形图标和半身像：
<!-- halflings / bootstrap 3 -->
<span class="glyphicon glyphicon-glass"></span>
<!-- Glyphicons Regular set (note the plural suffix!) -->
<span class="glyphicons glyphicons-glass"></span>
其他答案很好，但在使用sprite png时，请记住使用字体技术的图标与旧技术的图标之间的区别。Png并不总是可缩放的，因此有几种尺寸。此外，无法设置颜色。为了与背景形成对比，.white类可以在png上用于从黑色切换到白色。通过使用字体，将图标设置为字体样式：
.iconstyle { color: blue; font-size: 26px; etc.. }
您可以使用我的解决方案。把这一行放在你的头上的引导链接url css之后。
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/opa-icons.css" rel="stylesheet">
然后调用在线html代码
<i class="icon-close icon-red"></i> Someting <!-- 16x16pix size color red -->
<i class="icon32 icon-close icon-blue"></i> Someting <!-- 32x32pix size color red -->
你可以在这里下载资产（图片图标png和css都在zip中）：
http://www.photonautes-associes.fr/utils/assets.zip享受：）
从官方引导页面下载字体，然后将此代码原样粘贴到您的CSS文件中
试试这个代码
@font-face{
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');}
我想把我的经验添加到这里的列表中。
当我试图将Glyphicons All添加到我现有的、迷宫般的、充满Bootstrap的代码库中时，有几个障碍。（其中，Glyphicons All使用构造".gyphicons.gyphicons-[name]"，Bootstrap使用构造".Gyphicons.Gyphicons-[name]"）。
我最终决定同时使用它们。展望未来，我发现我越来越多地使用Glyphicons All构造，但Bootstrap构造仍然适用于我现有的所有代码。
是的，包括这两种"字体"会增加页面的整体重量，但不会造成灾难。
我所做的非常简单，工作非常完美。注意：这是如果你想让那些漂亮的字形图标作为字体工作，就像我使用的引导程序版本一样。
-
在glyphiconszip中，将/gyphicons/web/bootstrap_example/fonts中的所有字体复制到项目中引导字体的当前位置
-
在glyphicons zip中，查看/web/bootstrap_example/css/gglyphicons.css，将所有内容复制并粘贴到您自己的less/css文件中。
-
只要您自己的css/less文件正确地覆盖它们，这一步骤就可能是不必要的：在项目的bootstrap.css文件中，删除@font face内容、.ghryphicon样式和所有glyphicon单独的内容标记（即，.ghrypricon xxxx:在{content:…}之前）。
-
在包含所有新标记的less/css文件中，进行查找和替换".gyphicicons-"替换为".gyphyicon-"
应该是这样，除非我忘记了一些简单的事情。对我来说效果很好。
使用glyphicons classess，例如：
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
我最喜欢的图标字体是Fontello，你可以下载你需要的图标，而不是整个包。