web-dev-qa-db-ja.com

Twitter Bootstrap-灰色のグリフィコンの入手方法

私はTwitterを使用していますbootstrapそして彼らのホームページで使用されているグリフィコンについて質問があります。参考のために、ベースCSSページをご覧ください： http://Twitter.github.com /bootstrap/base-css.html

左側には、ナビゲーション（タイポグラフィ、コード、表など）が表示されます。お気づきのように、ナビゲーションには「icon-chevron-right」クラスで識別されるグリフィコンが含まれています。ただし、アイコンは黒でも白でもありません。灰色です。マウスを特定のアイテムの上に置くと、アイコンは濃い灰色に変わります。 CSSは異常なことを何も表示せず、黒いグリフィコンを参照しているように見えますが、アイコンは灰色でホバー効果があります。

bootstrapのどの機能がここで使用されているか考えていますか？

twitter-bootstrapglyphicons
13
callmekatootie

これは実際にはCSSの不透明度プロパティを使用して設定されます。彼らのコード：

.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;
}
16
Seer

不透明度で遊ぶ代わりに、フォントであるグリフィコンを利用して、そのように扱う必要があります。

.text-grey {
  color: grey;
}

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

または、これを行うように設計されたbootstrapクラスを使用します：.text-muted

<span class="glyphicon glyphicon-search text-muted"></span>
19
Snæbjørn

Bootstrap font-awesome （bootstrapで使用するために構築された））でアイコンを使用している場合は、次の点で完全に制御できます。スケール、配置、色、不透明度など。

1
nickhar

アイコン付きのリンク用にこの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>
1
gbonline