5

我正在尝试使用 twitter bootstrap 将主页图标的颜色与非活动文本的颜色相匹配，如下所示：

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li class="nav_item"><a href="indexdefaults.html"><i class="icon-home icon-gray"></i>Home</a></li>
        <li class="active"><a href="about.html">About</a></li>
      </ul>
    </div>
  </div>
</div>

但是“icon-gray”类比“nav_item”类中的文本要暗得多。与 nav_item 文本颜色匹配的适当类 icon-foobar 是什么？

4

3 回答 3

10

您可以使用自定义样式获得灰色：

.icon-gray {
  opacity: 0.3;
}

您可能必须根据黑色的重量将不透明度更改为更低或更高。

于 2012-06-26T11:49:55.713 回答
3

图标只有两种变体，白色和深色，如果您想获得一组不同颜色的图标，您必须在 photoshop 中修改原始图标或支付完整的图标集并修改源文件。没有.icon-gray。

于 2012-05-26T13:21:16.130 回答
0

你为什么不直接集成：Font Awesome 可以很好地与 Bootstrap 一起工作而无需编辑图像，你可以像处理文本一样更改图标的颜色：

.icon-gray {color:#696969;}

字体真棒： http: //fortawesome.github.io/Font-Awesome/

查找 CSS 匹配颜色：http ://www.w3schools.com/cssref/css_colornames.asp

于 2013-05-16T17:05:19.407 回答