web-dev-qa-db-ja.com

Bootstrap 2を使用して、すべての場所でグリフアイコンの色を青色に変更することはできません。

私は自分のUIにBootstrapフレームワークを使用しています。私のグリフィコンの色を青に変えたいのですが、すべての場所でそうではありません。いくつかの場所ではデフォルトの色を使うべきです。

私はこれら二つのリンクを参照しましたが、私は何も役に立たないと思っています。

注意してください：私は Bootstrap 2.3.2 を使っています。

htmlcsstwitter-bootstrap-2
144
Mike Phils

最後に私は自分自身で答えを見つけました。 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>
23
Mike Phils

アイコンは、その親の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;
}

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

266
Vikas Ghodke

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

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

enter image description here

利用可能な色の全リスト： ブートストラップドキュメンテーション：ヘルパークラス
（青もあります）

175
itsnikolay

ブートストラップ3.0に関しては、これは私のために働きました：

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

あなたもこれを行うことができます、hopeitが役立ちます

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
6
Guven Sezgin Kurt

はい、アイコンを白い色に設定できます。これが私のために働いた方法です。

Bootstrap <3

HTML

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

これはあなたのアイコンを白く見せるでしょう。

3
A.J.

私はbootstrap 2.3.2用の代替の colorsライブラリを作成しました 古いglyphiconsライブラリのためにより多くの色に興味を持っている人なら誰でも利用可能で使いやすいです。

3
Eric Uldall

ブートストラップアイコンだけの場合アイコンはテキストまたは文字体裁の下にあります。このようにテキストカラークラスを追加するだけです。例えば、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>
2
White.Raven

CSS：

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

HTML

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

グリフィコンは4.0で削除されました。Font-awesome 4以降を推奨します

1
Michael Jørgensen

Bootstrap> = v4.0はグリフサポートを廃止しました

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

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>
1
Caner

これまでの答えはすべて正解ですが、色を変更するのに1つの場所に1つのアイコンしか必要ない場合は、これが簡単で素早い方法です。

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

enter image description here

1
grepit

Iのようにbootstrapフォント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);
0
Peter Mlich