twitter-bootstrap Twitter Bootstrap - 如何获得灰色字形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15410710/
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
Twitter Bootstrap - How to get the grey glyphicon
提问by callmekatootie
I am using twitter bootstrap and I have a question on the glyphicon used in their home page. For reference, take the Base CSS page: http://twitter.github.com/bootstrap/base-css.html
我正在使用 twitter bootstrap，我对他们主页中使用的 glyphicon 有疑问。参考基本 CSS 页面：http: //twitter.github.com/bootstrap/base-css.html
On the left side, you can see the Navigation - Typography, Code, Tables and the like. Now if you notice, the navigation contains the glyphicon identified by the class "icon-chevron-right". However, the icon is not black or white. It is grey. When the mouse hovers over a particular item, the icon turns into a darker shade of grey. The CSS does not show anything out of the ordinary and seems to refer the black glyphicon, yet the icon is grey and has a hover effect.
在左侧，您可以看到导航 - 排版、代码、表格等。现在，如果您注意到，导航包含由“icon-chevron-right”类标识的字形。但是，图标不是黑色或白色。它是灰色的。当鼠标悬停在特定项目上时，图标会变成更深的灰色阴影。CSS 没有显示任何不寻常的东西，似乎指的是黑色的字形，但图标是灰色的并且有悬停效果。
Any idea which feature of bootstrap is being used here?
知道这里使用了引导程序的哪个功能吗？
回答by Sn?bj?rn
Instead of playing around with opacity you should instead take advantage of glyphicon being a font and treat it as such.
您应该利用 glyphicon 作为字体并将其视为此类，而不是使用不透明度。
.text-grey {
color: grey;
}
<span class="glyphicon glyphicon-search text-grey"></span>
Or use the bootstrap class designed to do this: .text-muted
或者使用专门用于执行此操作的引导程序类： .text-muted
<span class="glyphicon glyphicon-search text-muted"></span>
回答by Seer
This is actually set using the CSS opacity property. Their code:
这实际上是使用 CSS opacity 属性设置的。他们的代码：
.bs-docs-sidenav .icon-chevron-right {
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;
}
This changes on hover to a higher opacity to make it darker. It is in reality just the black icon.
这会在悬停时更改为更高的不透明度以使其更暗。它实际上只是黑色图标。
So, something like:
所以，像这样：
.class > i {
opacity: 0.25;
}
.class:hover > i {
opacity: 0.5;
}
回答by nickhar
If you're using icons in Bootstrap - take a look at font-awesometoo (built for use with bootstrap), where you have complete control of in terms of scale, placement, color, opacity etc.
如果您在 Bootstrap 中使用图标 - 也请查看font-awesome（专为与 bootstrap 一起使用而构建），您可以在其中完全控制比例、位置、颜色、不透明度等。
回答by gbonline
I've create this css for my links with icons
我已经为我的带有图标的链接创建了这个 css
.icon-grey-link {
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
a:hover > i.icon-grey-link {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
and it's applied as class to i element
并将其作为类应用于 i 元素
<a href="#"><i class="icon-star icon-grey-link"></i>Star</a>
