Twitter Bootstrap - 如何获取灰色的glyphicon

Question

我正在使用 Twitter Bootstrap，对于他们主页上使用的 glyphicon 有一个问题。请参考Base CSS页面：http://twitter.github.com/bootstrap/base-css.html

在左侧，您可以看到导航 - 排版、代码、表格等。如果您注意一下，导航包含由类“icon-chevron-right”识别的 glyphicon。然而，该图标不是黑色或白色。它是灰色的。当鼠标悬停在特定项目上时，图标会变成更深的灰色。CSS 没有展示任何异常，似乎引用了黑色 glyphicon，但图标是灰色的，并且具有悬停效果。

有什么想法是 Bootstrap 此处使用的特性吗？

- callmekatootie

Answer 1

你应该利用glyphicon作为字体来处理，而不是玩弄透明度。

.text-grey {
  color: grey;
}

<span class="glyphicon glyphicon-search text-grey"></span>

或者使用Bootstrap设计的类来实现这一点：.text-muted

<span class="glyphicon glyphicon-search text-muted"></span>

- Snæbjørn

---

我建议使用 ".text-muted"。 - Ruslanas Balčiūnas

我使用 text-muted，因为这是“Bootstrap认可”的做法，但是我在CSS中重新定义它，使它成为更浅的灰色：.glyphicon.text-muted { opacity: 0.25; }。 - trubliphone

Answer 2

这实际上是使用 CSS opacity 属性设置的。他们的代码：

.bs-docs-sidenav .icon-chevron-right {
float: right;
margin-top: 2px;
margin-right: -6px;
opacity: .25;
}

当鼠标悬停时，此图标会变成更高的不透明度以使其变暗。实际上，它只是黑色图标。

因此，类似于：

.class > i {
    opacity: 0.25;
}

.class:hover > i {
    opacity: 0.5;
}

- Seer

Answer 3

我为我的带有图标的链接创建了这个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 */
}

这是关于编程的内容，指将其应用为 i 元素的类。保留了HTML标记。

<a href="#"><i class="icon-star icon-grey-link"></i>Star</a>

- gbonline

Answer 4

如果您在Bootstrap中使用图标，请查看font-awesome（专为与Bootstrap一起使用而构建），在其中您可以完全控制缩放、位置、颜色、不透明度等。

- nickhar