Bootstrap css 使用来自Glyphicons 的半身人。 如果我购买了他们的完整产品线，我将如何将其整合到引导框架中？
【问题讨论】：
标签： css twitter-bootstrap
使用此CSS sprite generator，上传 zip 文件。它将为您创建相关的 CSS 类（名称取自图像本身），将所有图像合并到一个（透明）PNG 中。
【讨论】：
您也可以使用Font Awesome 解决方案。
可缩放矢量图形意味着图标在任何尺寸下看起来都很棒。
从头开始设计，完全向后兼容 Twitter Bootstrap 2.0。
【讨论】：
您必须将每个字形图标的背景位置重新计算到您自己的类中，或者覆盖引导程序已经设置的类才能使用它们。Twitter 的引导程序使用 14 像素的半身人（免费）版本的图标到处都是，全套尺寸是原来的两倍，所以旧的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;
}
【讨论】：
我也在 Github 上创建了一个。之后才看到上面 Marco 的帖子。
【讨论】：
据我回忆，Glyphicons 并没有将他们的图标作为精灵版本提供（许多图标作为一个图像），而是您单独获取每个图标。如果你只打算使用他们的几个图标，这应该没问题。
最好的方法是创建一个单独的 css 文件并继续使用它们的“.icon-”命名约定。
.icon-whatever {
background:url('..img/someicon.png') 0 0;
}
默认背景位置为14px 14px，因此您需要将其重置为0 0，就像我在上面所做的那样。
【讨论】：
我为 Bootstrap 创建了一个 sprite 和 CSS 插件来提供此功能。回购和说明在Github。并非每个图标都有覆盖范围，有些图标仍然略微偏离中心。要使用更大的图标，只需添加 icon-large CSS 类：
<i class="icon-large icon-search"></i>
【讨论】：
这里有一篇关于引导图标的精彩文章：http://www.themplio.com/twitter-bootstrap-icons
【讨论】：
不需要合并它。您只需添加字形图标并将其与附带的半身人引导程序一起使用。
如下添加字形图标（正则集）：
/css/glyphicons.css
/fonts/glyphicons-regular.eot
/fonts/glyphicons-regular.svg
/fonts/glyphicons-regular.ttf
/fonts/glyphicons-regular.woff
/fonts/glyphicons-regular.woff2
您可能应该给 base-css-class: .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 中）：
【讨论】：
从官方引导页面下载字体，然后将此代码按原样粘贴到您的 CSS 文件中
试试这个代码
@font-face{
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');}
【讨论】：
我想我会把我的经验添加到这里的列表中。
在尝试将 Glyphicons All 添加到我现有的、迷宫般的、充满 Bootstrap 的代码库时，我遇到了一些障碍。 （其中，Glyphicons All 使用结构“.glyphicons .glyphicons-[name]”，Bootstrap 使用结构“.glyphicon .glyphicon-[name]”）。
我最终决定同时使用它们。展望未来，我发现我越来越多地使用 Glyphicons All 构造，但 Bootstrap 构造仍然适用于我现有的所有代码。
是的，包括这两种“字体”都会增加整个页面的重量，但不会造成灾难性的后果。
【讨论】：
我所做的非常简单，而且效果很好。注意：如果您希望将那些漂亮的字形图标用作字体，就像我正在使用的引导版本一样。
在 glyphicons zip 中，将 /glyphicons/web/bootstrap_example/fonts 中的所有字体复制到您的引导字体当前在项目中的位置
在 glyphicons zip 中，查看 /web/bootstrap_example/css/glyphicons.css，将所有内容复制并粘贴到您自己的 less/css 文件中。
在包含所有新标签的 less/css 文件中，进行查找和替换 “.glyphicons-”替换为“.glyphicon-”
应该就是这样，除非我忘记了一些简单的事情。对我很有用。
【讨论】：
使用glyphicons classess，例如：
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
我最喜欢的图标字体是Fontello，你可以下载你需要的图标而不是整个包。
【讨论】：