引导字形
Bootstrap CSS使用Glyphicons中的半身人。 如果我购买了完整的产品系列，我将如何将其纳入引导框架？
你将不得不重新计算每个字形图标的背景定位到你自己的类中，或者覆盖已经由bootstrap设置的类，以便使用它们。Twitter的引导使用半angular（免费）版本的14px图标，全套是大小的两倍，所以旧的background-position's将无法正常工作。
下面是一个自举图标类的例子：
/* 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; }
使用这个CSS sprite生成器 ，上传zip文件。 它将为您创build相关的CSS类（名称是从图像本身获取的），将所有图像合并成一个（透明的）PNG图像。
您也可以使用Font Awesome解决scheme。
可缩放的vectorgraphics意味着任何尺寸的图标看起来都很棒
从头开始devise，完全向后兼容Twitter Bootstrap 2.0。
我也在Github上创build了一个。 上面没有看到Marco的post。
据我所知，Glyphicons没有提供它们的图标作为精灵版本（许多图标作为一个图像），而是你分别得到每个图标。 如果你只打算使用他们的一些图标，这应该是好的。
最好的方法是创build一个单独的css文件并继续使用“.icon”命名约定。
.icon-whatever { background:url('..img/someicon.png') 0 0; }
默认的背景位置是14px 14px所以你需要重置为0 0就像我上面做的那样。
我已经为Bootstrap创build了一个sprite和CSS插件来提供这个function。 回购和指示在Github上 。 不是所有的图标都有覆盖，有的还偏离了中心。 要使用更大的图标，只需添加icon-large CSS类：
<i class="icon-large icon-search"></i>
这里有一篇关于Bootstrap图标的文章： http : //www.themplio.com/twitter-bootstrap-icons
没有必要纳入它。 您可以添加glyphicons并将其与halfings bootstrap一起使用。
添加glyphicons（常规设置）如下：
/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风格与bootstraps。glyphicon .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 }
接下来，按如下方式将对graphics的引用添加到页面中：
<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并不总是可缩放的，因此有几种尺寸。 此外，颜色不能设置。 为了与背景对比，可以在PNG上使用.white类从黑色切换到白色。 通过使用字体，您可以像devise字体一样设置图标的样式：
.iconstyle { color: blue; font-size: 26px; etc.. }
你可以用我的soluce。 将这行放在引导链接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中）：
从官方引导页面下载字体，然后将这些代码粘贴到CSS文件中
试试这个代码
@font-face{ font-family: 'Glyphicons Halflings'; src: url('/fonts/glyphicons-halflings-regular.eot');}
我想我会把我的经验添加到这里的名单。
尝试将Glyphicons All添加到我现有的迷宫式引导程序代码库中时，遇到了一些障碍。 （其中，Glyphicons All使用的是“。glyphicons。glyphicons- [name]”和Bootstrap使用的结构“.glyphicon。glyphicon- [name]”）。
我最终决定同时使用它们。 outlook未来，我发现我越来越多地使用Glyphicons All构造，但Bootstrap构造仍然适用于我现有的所有代码。
是的，包括“字体”都增加了整个页面的重量，但不是灾难性的。
我所做的很简单，完美地工作。 注：这是如果你想这些漂亮的字形作为字体，作为我使用的引导版本。
-
在glyphicons zip中，将/ glyphicons / web / bootstrap_example / fonts中的所有字体复制到项目中当前引导字体的位置
-
在glyphicons zip中，查看/web/bootstrap_example/css/glyphicons.css，复制并粘贴到你自己的less / css文件中。
-
这个步骤可能是不必要的，只要你自己的css / less文件覆盖它们：在你的项目的bootstrap.css文件中，删除@ font-face的东西，.glyphicon的样式和所有的glyphicon个别的内容标签（即，.glyphicon- xxxx：before {content：…}）。
-
在带有所有新标签的less / css文件中，find并replace“.glyphicons-”replace为“.glyphicon-”
应该是这样，除非我忘记了一些简单的东西。 对我很好。
使用glyphicons classess ，例如：
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
我最喜欢的图标字体是Fontello ，你可以下载你需要的图标，而不是整个包。
