CSS 引导 Glyphicons
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9486443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap Glyphicons
提问by Phillip Senn
Bootstrap css uses the halflings from Glyphicons. If I purchased their full product line, how would I incorporate that into the bootstrap framework?
Bootstrap css 使用来自Glyphicons的半身人。如果我购买了他们的完整产品线，我将如何将其合并到引导程序框架中？
采纳答案by Andres Ilich
You would have to recalculate the background positioning of every glyph icon into your own class or overwrite the classes already set by the bootstrap in order to work them in. Twitter's bootstrap uses the halfling (free) version of the icons which are 14px all around, the full set is double the size so the old background-position'swon't work.
您必须将每个字形图标的背景位置重新计算到您自己的类中，或者覆盖引导程序已经设置的类才能使用它们。 Twitter 的引导程序使用半身人（免费）版本的图标，周围都是 14 像素，全套是两倍大，所以旧的background-position's不起作用。
Here is an example of what one of the bootstraps icon classes looks like:
以下是其中一个引导图标类的示例：
/* 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;
}
回答by gremo
Use this CSS sprite generator, uploading the zip file. It will create the relevant CSS classes for you (names are taken from images itself), merging all images in one (transparent) PNG one.
使用这个CSS 精灵生成器，上传 zip 文件。它将为您创建相关的 CSS 类（名称取自图像本身），将所有图像合并为一个（透明）PNG 格式。
回答by Alex
You could also use the Font Awesomesolution.
您也可以使用Font Awesome解决方案。
Scalable vector graphics means icons look awesome at any size.
Designed from scratch to be fully backwards compatible with Twitter Bootstrap 2.0.
可缩放的矢量图形意味着图标在任何尺寸下看起来都很棒。
从头开始设计以完全向后兼容 Twitter Bootstrap 2.0。
回答by ekryski
I have also created one on Github. Didn't see Marco's post above until after.
我也在 Github 上创建了一个。直到后来才看到上面 Marco 的帖子。
回答by Makotosan
From what I recall, Glyphicons doesn't provide their icons as a sprite version (many icons as one image), instead you get each icon separately. If you only plan on using a couple of their icons, this should be ok.
据我所知，Glyphicons 并没有将它们的图标作为精灵版本提供（许多图标作为一个图像），而是您分别获得每个图标。如果你只打算使用他们的几个图标，这应该没问题。
The best way would be to create a separate css file and continue on with their ".icon-" naming convention.
最好的方法是创建一个单独的 css 文件并继续使用它们的“.icon-”命名约定。
.icon-whatever {
background:url('..img/someicon.png') 0 0;
}
The default background position is 14px 14pxso you need to reset it to 0 0like I did above.
默认的背景位置是14px 14px这样你需要0 0像我上面那样重置它。
回答by Marco Ceppi
I've created a sprite and CSS drop-in for Bootstrap to provide this functionality. The repo and instructions are on Github. Not every icon has coverage yet, and some are still slightly off-center. To use the bigger icons just add the icon-largeCSS class:
我为 Bootstrap 创建了一个精灵和 CSS 插件来提供这个功能。回购和说明在Github 上。并非每个图标都有覆盖范围，有些图标仍然略微偏离中心。要使用更大的图标，只需添加icon-largeCSS 类：
<i class="icon-large icon-search"></i>
回答by Tom Witek
There is a great article about Bootstrap Icons here: http://www.themplio.com/twitter-bootstrap-icons
这里有一篇关于 Bootstrap 图标的很棒的文章：http: //www.themplio.com/twitter-bootstrap-icons
回答by Andries
No need to incorporate it. You can just add the glyphicons and use it alongside with the halflings bootstrap comes with.
没有必要合并它。您可以添加字形并将其与半身人引导程序一起使用。
Add the glyphicons (regular set) as follows:
添加字形（常规集）如下：
/css/glyphicons.css
/fonts/glyphicons-regular.eot
/fonts/glyphicons-regular.svg
/fonts/glyphicons-regular.ttf
/fonts/glyphicons-regular.woff
/fonts/glyphicons-regular.woff2
You propably should give the base-css-class: .glyphiconsthe same style as bootstraps .glyphicon
你可能应该给 base-css-class:.glyphicons与 bootstraps 相同的样式.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
}
Next, add the reference to the glyphicons into your page as follows:
接下来，将字形的引用添加到您的页面中，如下所示：
<link href="/css/glyphicons.css" rel="stylesheet" />
Now, use the complete 'regular' glyphicons alongside with the halflings:
现在，将完整的“常规”字形与半身人一起使用：
<!-- halflings / bootstrap 3 -->
<span class="glyphicon glyphicon-glass"></span>
<!-- Glyphicons Regular set (note the plural suffix!) -->
<span class="glyphicons glyphicons-glass"></span>
The other answers are fine but keep in mind the difference between icons with the font-technique and the older technique when using sprite-png's. Png's are not always scaleable and therefore comes with several sizes. Also, the color can not be set. To contrast with the background, the .whiteclass can be used on png's to switch from black to white. By using fonts, style the icons as you would style a font:
其他答案很好，但请记住使用 sprite-png 时使用字体技术的图标与旧技术之间的区别。Png 并不总是可缩放的，因此有多种尺寸。此外，无法设置颜色。为了与背景形成对比，.white可以在 png 上使用该类从黑色切换到白色。通过使用字体，像设置字体一样设置图标样式：
.iconstyle { color: blue; font-size: 26px; etc.. }
回答by skybondsor
I thought I'd add my experience to the list here.
我想我会将我的经验添加到这里的列表中。
There were several obstacles for me when trying to add Glyphicons All to my existing, labyrinthine, Bootstrap-riddled codebase. (Among them, Glyphicons All uses the construction ".glyphicons .glyphicons-[name]" and Bootstrap uses the construction ".glyphicon .glyphicon-[name]").
在尝试将 Glyphicons All 添加到我现有的、迷宫般的、充满 Bootstrap 的代码库时，我遇到了几个障碍。（其中，Glyphicons All 使用结构“.glyphicons .glyphicons-[name]”，Bootstrap 使用结构“.glyphicon .glyphicon-[name]”）。
I ultimately decided to just use them both, in parallel. Going forward, I find I'm using the Glyphicons All construction more and more, but the Bootstrap construction still works for all of my existing code.
我最终决定同时使用它们。展望未来，我发现我越来越多地使用 Glyphicons All 结构，但 Bootstrap 结构仍然适用于我现有的所有代码。
Yes, including both "fonts" adds to the overall page weight, but not disastrously.
是的，包括这两种“字体”会增加整个页面的重量，但不是灾难性的。
回答by Aaron Vanderwielen
What I did was pretty simple and worked perfectly. NOTE: this is if you want those beautiful glyphicons working as fonts, as the bootstrap version I'm using does.
我所做的非常简单，而且效果很好。注意：这是如果您希望那些漂亮的字形作为字体工作，就像我使用的引导程序版本那样。
In the glyphicons zip, copy all the fonts in /glyphicons/web/bootstrap_example/fonts to where your bootstrap fonts are currently in your project
In the glyphicons zip, look at /web/bootstrap_example/css/glyphicons.css, copy and paste all into your own less/css file.
This step may be unnecessary as long as your own css/less file overwrites them properly: In your project's bootstrap.css file, remove @font-face stuff, .glyphicon styles, and all the glyphicon individual content tags (i.e, .glyphicon-xxxx:before { content: ... }).
In your less/css file with all the new tags, do a find and replace ".glyphicons-" replace with ".glyphicon-"
在 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 文件中，查找并替换“.glyphicons-”，替换为“.glyphicon-”
That should be it, unless I'm forgetting something simple. Works great for me.
应该是这样，除非我忘记了一些简单的事情。对我很有用。
