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

159

Twitterのブートストラップは、Glyphiconsによるアイコンを使用しています。available in dark gray and whiteデフォルトでは " "です。

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

囲んでいる（）要素の背景色を変更できることは知っていますが、アイコンの前景色について話しています。アイコン画像の透明度を逆にして、背景色を設定することは可能だと思います。

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

— cwd
ソース

私はそうは思いません...しかし、おそらくJavaScriptとcanvas要素でそれを行うことができます。

— bfavaretto 2012

@bfavaretto-詳しく説明できますか？各アイコンを描画するためのコード/座標を思いついたり、何らかの形で既存のpng画像を使用したりすることを意味しますか？

— cwd 2011

1

申し訳ありませんが、canvas要素については、コードを提案するのに十分な経験はありませんが、キャンバスを使用してピクセルを個別に操作できることはわかっています。

— bfavaretto 2012

189

はい、BootstrapでFont Awesomeを使用している場合！アイコンは少し異なりますが、アイコンの数は多く、どのサイズでも見栄えがよく、色を変更できます。

基本的にアイコンはフォントであり、CSSのcolorプロパティを使用してアイコンの色を変更できます。統合手順は、ページの下部にあるリンクにあります。

編集： Bootstrap 3.0.0アイコンはフォントになりました！

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

— hajpoj
ソース

9

ああ、賢い！cursor: default;ユーザーがIバーを表示しないように設定することを忘れないでください。また、本当に賢いフォントであるFF Chartwellもチェックしてください。tktype.com

— Dai

4

（ワードプロセッサのように）テキストの上にマウスを置くと、カーソルが大きすぎる大文字の " I"文字のようになり、テキストの選択に使用されます。CSSではと呼ばれcursor: text;ます。「Iビーム」とも呼ばれます。

— 2012

38

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グリフィコンリスト

— fseminario
ソース

17

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

たとえば、CSSに 追加text-infoすると、アイコンは情報の青色になります。

— トランシー
ソース

コンテキストクラスを適用する方法を探してくれてありがとう。すべてのtext- *コンテキストクラスが機能します

— ダスティンホッジス'28

14

ブートストラップアイコンを別の色で表示する別の可能な方法は、新しい.pngを目的の色（例：マゼンタ）で作成し、/ path-to-bootstrap-css / img / glyphicons-halflings- magentaとして保存することです。 .png

あなたの中variables.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>

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

— セップ・ラジャー
ソース

5

繰り返し説明したかったI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

— cwd '13

クロスブラウザー互換性のあるCSSだけで行うことはできません。通常、人々は関連するアイコンを使った配色を必要とするので、最大5つのカラーセットはそれほど難しいものではありません。

— foxybagga 2013年

@seppludger新しいカラーハーフリングスプライトをどのように作成しますか？これに成功しましたか？グラフィックエディタでロードした場合、色を変更できません。

— ノーマン

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>

— frbl
ソース

あなたの答えは役に立ちました。+ 1。編集アイコンを使用して黄色を入れたかったです。その方法を教えていただけますか？

まあ、アイコンを別のものに変更するだけです。例： icon-white"> 。例： 。それは...芋新しいブートストラップのために行く方が良いです

— frbl

6

ブートストラップグリフィコンはフォントです。これは、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によるUps and Running with Bootstrap 3 のコースをご覧になるか、カスタムスタイルでコアCSSをオーバーライドするに関する個別のレッスンをご覧ください。

— ユージーン
ソース

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>

ほら、緑と赤の親指。

— モンスターX
ソース

4

スタイルタグでも動作します：

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

ここに画像の説明を入力してください

— joan16v
ソース

3

実際には非常に簡単です。

ただ使う：

.icon-name{
color: #0C0;}

例えば：

.icon-compass{
color: #C30;}

それでおしまい。

— Aniruddh Dixit
ソース

3

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

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

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

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

— だい
ソース

1

mask-imageプロパティのサポートはそれほど素晴らしいものではないことに注意してください。

— Scott Bartell 2012

1

受け入れられた答え（font awesomeを使用）は正しい答えです。しかし、赤いバリアントを検証エラーで表示したかったので、このサイトで提供されているアドオンパッケージの使用を終了しました。

cssファイルのURLパスを編集しました。これは、絶対パス（/で始まる）であり、相対パスを好むためです。このような：

.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}

— mppfiles
ソース

最後に、古いバージョンのBootstrapと互換性のあるもの

— Dmitry Ginzburg

1

グローバルに色を変更することもできます

すなわち

 .glyphicon {
       color: #008cba; 
   }

— 開発者
ソース

1

GLYPHICONSを使用するだけで、CSSを設定するだけで色を変更できます。

#myglyphcustom {
    color:#F00;
}

— ヴァルター・ロラン
ソース

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をに設定whiteし、CSSプロパティborder-radiusを使用して要素全体を「丸め」ます。border-radiusお気づきのように、（7.5px）の値はwidthand heightプロパティの値のちょうど半分（両方とも15px、アイコンは正方形になります）で、要素は円形になります。

— WebWanderer
ソース