14

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

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

知道这里使用了引导程序的哪个功能吗？

4

4 回答 4

21

与其玩弄不透明度，不如利用 glyphicon 作为字体并将其视为字体。

.text-grey {
  color: grey;
}

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

或者使用旨在执行此操作的引导类：.text-muted

<span class="glyphicon glyphicon-search text-muted"></span>
于 2014-07-15T12:56:57.127 回答
16

这实际上是使用 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;
}
于 2013-03-14T13:34:01.403 回答
1

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

于 2013-03-14T13:51:04.960 回答
1

我已经为带有图标的链接创建了这个 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>
于 2013-10-07T13:13:35.727 回答