twitter bootstrap 中“icon-home”的匹配颜色答案

【问题标题】：Matching color of "icon-home" in twitter bootstraptwitter bootstrap 中“icon-home”的匹配颜色
【发布时间】：2012-06-01 14:07:05
【问题描述】：

我正在尝试使用 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 是什么？

【问题讨论】：

标签： css colors twitter-bootstrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

.icon-gray {
  opacity: 0.3;
}

您可能需要根据黑色的权重将不透明度更改为更低或更高。

【讨论】：

这非常有效。对于谨慎的灰色，我建议将不透明度调低至 0.3
“不透明度：0.3”很好。看起来很棒。
vincentjacquel 和@PeterBloom：根据您的 cmets 编辑了答案。感谢您的建议。

【解决方案3】：

您为什么不直接集成：Font Awesome，它可以在 Bootstrap 中正常工作而无需编辑图像，您可以像处理文本一样更改图标的颜色：

.icon-gray {color:#696969;}

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

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

【讨论】：