Question

我正在使用twitter bootstrap，我对他们主页中使用的glyphicon有疑问。作为参考，请参阅Base CSS页面：http://twitter.github.com/bootstrap/base-css.html

在左侧，您可以看到导航 - 排版，代码，表格等。现在，如果您注意到，导航包含由“icon-chevron-right”类标识的glyphicon。但是，图标不是黑色或白色。它是灰色的。当鼠标悬停在特定项目上时，图标会变成较暗的灰色阴影。 CSS没有显示任何不寻常的东西，似乎引用了黑色glyphicon，但图标是灰色的并且具有悬停效果。

任何想法都在使用bootstrap的哪个功能？

Answer 1

不应该使用不透明度，而应该利用glyphicon作为字体并将其视为一种字体。

.text-grey {
  color: grey;
}

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

或者使用设计用于执行此操作的引导类：.text-muted

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

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;
}

Answer 3

如果您在Bootstrap中使用图标 - 请查看font-awesome（与bootstrap一起使用），您可以完全控制比例，位置，颜色，不透明度等。

Answer 4

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

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

Twitter Bootstrap - 如何获取灰色glyphicon

4 个答案: