Bootstrap 2を使用して、グリフィコンの色を一部の場所で青に変更します。

UIにBootstrapフレームワークを使用しています。グリフィコンの色を青に変更したいのですが、すべての場所で変更するわけではありません。一部の場所では、デフォルトの色を使用する必要があります。

私はこれら2つのリンクを参照しましたが、役立つものは何も見つかりません。

• CSSのみを使用してブートストラップアイコンに色を追加できますか？
• Bootstrap 3のグリフィコンを白に変更するにはどうすればよいですか？

注意：私はBootstrap 2.3.2を使用しています。

アイコンは、そのcolor親のcssプロパティの値から色を採用します。

これをスタイルに直接追加することもできます。

<span class="glyphicon glyphicon-user" style="color:blue"></span>

または、アイコンとしてクラスとして追加し、CSSでフォントの色を設定することもできます

HTML

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

CSS

.blue {
    color: blue;
}

このフィドルには例があります。

text-successGlyphiconにTwitter Bootstrap クラスを適用するだけ です。

<span class="glyphicon glyphicon-play text-success">начал работу</span>

利用可能な色の完全なリスト：ブートストラップドキュメント：ヘルパークラス
（青も表示されます）

やっと自分で答えを見つけました。2.3.2ブートストラップに新しいアイコンを追加するには、ファイルにFont Awsome css を追加する必要があります。これを行った後、スタイルをcssでオーバーライドして、色とサイズを変更できます。

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

アイコンの色を変更したい場合は、茶色のクラスを追加するだけで、アイコンが茶色に変わります。また、さまざまなサイズのアイコンを提供します。

HTML

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

あなたもこれを行うことができます

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

ブートストラップ3.0の場合、これは私にとってはうまくいきました：

.myclass .glyphicon {color:blue !important;}

はい、アイコンを白色に設定できます。これが私にとってどのように機能したかです。

Bootstrap <3

HTML

<i class="icon-ok icon-white"></i>

これにより、アイコンが白く表示されます。

ブートストラップ2.3.2の代替色ライブラリを作成しました。これは、古いグリフィコンライブラリのより多くの色に興味がある人なら誰でも簡単に使用できます。

ブートストラップアイコンのみの場合。アイコンはテキストまたはタイポグラフィの下にあることに注意してください。このようなテキストの色クラスを追加するだけです。たとえば、text-primary、text-infoなどをアイコンクラスに追加します。

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>

ブートストラップ> = v4.0でグリフィコンのサポートが終了

Glyphiconsアイコンのフォントを削除しました。アイコンが必要な場合、いくつかのオプションがあります。

グリフィコンの上流バージョン

オクチコン

素晴らしいフォント

ソース：https : //v4-alpha.getbootstrap.com/migration/#components

Bootstrap> = v4.0以降を使用している場合はtext-success、text-warningなどの既存のブートストラップのスタイルクラスを使用できます。

たとえば、fontawesomeを使用している場合：

<i class="fa fa-tag text-danger" aria-hidden="true"></i>

CSS：

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

Glyphiconsは4.0で削除されました。Font-awesome4以降をお勧めします:)

以前のすべての答えは正しいですが、色を変更するために1つの場所で1つのアイコンのみが必要な場合は、ここに簡単で迅速な方法があります。

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>  

iのように、ブートストラップフォントのpng画像に使用すると、色が機能しません。

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

HTML5はcssフィルターを使用して画像に色を付けます、例

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);