162

Twitter のブートストラップは Glyphicons の Icons を使用しています。デフォルトでは " available in dark gray and white" です:

Picture-58.png

アイコンの色を変更するためにいくつかの CSS トリックを使用することは可能ですか? 色ごとにアイコン画像を設定する必要がないように、他のcss3の輝きを期待していました。

<i>囲んでいる ( ) 要素の背景色を変更できることは知っていますが、アイコンの前景色について話しているのです。アイコン画像の透明度を反転してから背景色を設定することは可能だと思います。

では、CSS のみを使用してブートストラップ アイコンに色を追加できますか?

4

14 に答える 14

190

はい、Bootstrap でFont Awesomeを使用すれば可能です! アイコンは少し異なりますが、より多くのアイコンがあり、どのサイズでも見栄えがよく、色を変更できます。

基本的にアイコンはフォントであり、CSS の color プロパティだけで色を変更できます。統合手順は、提供されたリンクのページの下部にあります。

編集: Bootstrap 3.0.0 アイコンがフォントになりました!

Bootstrap 3.0.0 のリリースで他の人も言及しているように、デフォルトのアイコングリフは Font Awesome のようなフォントになり、colorCSS プロパティを変更するだけで色を変更できます。サイズの変更は、プロパティを介して行うことができfont-sizeます。

于 2012-09-11T23:33:50.267 に答える
39

Bootstrap RC 3 の最新リリースでは、アイコンの色を変更するのは、必要な色のクラスを追加してそれをスパンに追加するのと同じくらい簡単です。

デフォルトの黒色:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

になるだろう

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

.icon-success {
    color: #5CB85C;
}

Bootstrap 3 グリフィコン リスト

于 2013-08-29T20:36:27.680 に答える
18

グリフィコンがフォントになったため、コンテキスト クラスを使用してアイコンに適切な色を適用できます。

例: css に<span class="glyphicon glyphicon-info-sign text-info"></span> 追加text-infoすると、アイコンが情報青色になります。

于 2014-05-22T20:25:14.100 に答える
14

ブートストラップ アイコンを別の色にするもう 1 つの方法は、新しい .png を目的の色 (マゼンタなど) で作成し、/path-to-bootstrap-css/img/glyphicons-halflings- magenta .pngとして保存することです。

あなたの変数で.less検索

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

この行を追加します

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

sprites.lessに追加します

/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("@{iconMagentaSpritePath}");
}

そして、次のように使用します。

<i class='icon-chevron-down icon-magenta'></i>

それが誰かを助けることを願っています。

于 2012-11-12T14:25:56.237 に答える
7

アイコンを実際に色付けするのではなく、必要な色のラベルまたはバッジで囲みます。

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>
于 2013-04-17T12:19:36.607 に答える
6

Bootstrap Glyphicons はフォントです。これは、CSS スタイルを使用して他のテキストと同様に変更できることを意味します。

CSS:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

<span class="glyphicon glyphicon-plus"></span>

例：

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;    
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>


Jen Kramer によるUp and Running with Bootstrap 3 のコースを視聴するか、カスタム スタイルによるコア CSS のオーバーライドに関する個別のレッスンを視聴してください。

于 2014-02-04T13:39:32.157 に答える
4

これはすべて少し回り道です..

私はこのようなグリフを使用しました

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

色に影響を与えるために、このように頭に少しCSSを含めました

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

出来上がり、緑と赤の親指。

于 2013-08-28T20:17:10.533 に答える
3

プロパティを使用しmask-imageますが、少しハックです。こちらの Safari ブログで説明されています。

こちらでも詳しく説明されています。

基本的には、たとえば a を使用して CSS ボックスを作成し、background-image: gradient(foo);それらの PNG 画像に基づいて画像マスクを適用します。

Photoshop で個々の画像を作成する開発時間を節約できますが、画像をさまざまな色で表示しない限り、帯域幅を大幅に節約できるとは思いません。個人的には、この手法を効果的に使用するにはマークアップを調整する必要があるため、使用しませんが、私は「純度は不可欠」という考え方のメンバーです。

于 2012-09-11T23:14:43.153 に答える
0

このスニペットをこの古い投稿に追加するかもしれないと思いました。これは、アイコンがフォントになる前に、私が過去に行ったことです。

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

これは @frbl の卑劣な答えに非常に似ていますが、別の画像は使用していません。代わりに、これは要素の background-color を に設定<i>しwhite、CSS プロパティborder-radiusを使用して要素全体を<i>「丸みを帯びた」ものにします。お気付きかもしれませんが、border-radius(7.5px)の値はwidthandheightプロパティの値のちょうど半分 (どちらも 15px で、アイコンが正方形になります) であり、<i>要素が円形になっています。

于 2014-11-10T16:23:28.947 に答える