14

ツイッターのブートストラップを使用していますが、ホームページで使用されているグリフィコンについて質問があります。参考までに、ベースCSSページを参照してください：http ：//twitter.github.com/bootstrap/base-css.html

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

ここでブートストラップのどの機能が使用されているか考えてみてください。

4

4 に答える 4

21

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

.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の不透明度プロパティを使用して設定されます。彼らのコード：

.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でアイコンを使用している場合は、フォントも見てください（ブートストラップで使用するために構築されています）。ここでは、スケール、配置、色、不透明度などを完全に制御できます。

于 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 に答える