UI に Bootstrap フレームワークを使用しています。グリフィコンの色を青に変更したいのですが、すべての場所ではそうではありません。一部の場所では、デフォルトの色を使用する必要があります。
これら 2 つのリンクを参照しましたが、何の役にも立ちません。
注意: Bootstrap 2.3.2を使用しています。
436801 次
12 に答える
288
アイコンは、その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;
}
このフィドルには例があります。
于 2013-08-20T12:32:56.683 に答える
24
最後に、私は自分で答えを見つけました。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>
于 2013-08-22T15:20:44.080 に答える
7
あなたもこれを行うことができます、それが役立つことを願っています
<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
于 2014-08-19T20:55:12.083 に答える
7
ブートストラップ 3.0 の場合、これでうまくいきました。
.myclass .glyphicon {color:blue !important;}
于 2015-05-19T15:25:05.863 に答える
3
はい、アイコンを白色に設定できます。これが私にとってどのように機能したかです。
Bootstrap <3
HTML
<i class="icon-ok icon-white"></i>
これにより、アイコンが白く表示されます。
于 2013-11-15T07:00:45.123 に答える
3
ブートストラップ 2.3.2 用の代替色ライブラリを作成しました。これは、古いグリフィコン ライブラリのより多くの色に興味がある人なら誰でも簡単に使用できます。
于 2013-09-05T07:04:27.037 に答える