web-dev-qa-db-ja.com

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

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

Picture-58.png

アイコンの色を変えるのにCSSトリックを使うことは可能ですか？色ごとにアイコン画像を設定しなくても済むような、他のcss3の輝きを望んでいました。

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

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

csstwitter-bootstrapspritecss-sprites
158
cwd

はい、あなたがBootstrapで Font Awesome を使うならば！アイコンは少し異なりますが、もっとたくさんあります、それらはどんなサイズでもよく見えます、そしてあなたはそれらの色を変えることができます。

基本的にアイコンはフォントであり、CSSのcolorプロパティを使ってアイコンの色を変えることができます。統合の手順は、提供されているリンクのページの下部にあります。

編集：Bootstrap 3.0.0のアイコンがフォントになりました。

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

189
hajpoj

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 Glyphicons List

38
fseminario

グリフィコンは現在フォントなので、アイコンに適切な色を適用するために コンテキストクラス を使うことができます。

例えば：<span class="glyphicon glyphicon-info-sign text-info"></span>をtext-infoをcssに追加すると、アイコンは情報の青い色になります。

17
truncie

別の色でブートストラップアイコンを表示するもう1つの方法は、希望する色（たとえばMagenta）で新しい.pngを作成し、/ path-to-bootstrap-css/img/glyphicons-halflings - Magentaとして保存することです 。png

variables.less findに

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

そしてこの行を追加

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

あなたの sprites.less addに

/* 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>

誰かに役立つことを願っています。

14
Sepp Ludger

アイコンを実際に色付けするのではなく、必要な色のラベルまたはバッジで囲むことで、私のためにすばやく汚い作業をしました。

<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>
7
frbl

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>


コースを見る ブートストラップを使った起動と実行3 、またはJen Kramerによる個別レッスンを見る カスタムスタイルのコアCSS 。

6
Eugene

Styleタグでも動作します。

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

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

enter image description here

4
joan16v

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

私はこのようなグリフを使った

  </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>

ほら、緑と赤の親指。

4
Monsters X

mask-imageプロパティを使用してください、しかしそれはちょっとしたハックです。これはSafariブログ のここ に示されています。

それはまたここに詳細に記述されています。

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

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

3
Dai

それは実際にはとても簡単です。

ただ使用する：

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

例えば：

.icon-compass{
color: #C30;}

それでおしまい。

3
Aniruddh Dixit

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

すなわち.

 .glyphicon {
       color: #008cba; 
   }
1
Developer

受け入れられた答え（素晴らしいフォントを使用）は正しいものです。しかし、私はただバリエーションエラーを表示するために赤い変種を望んでいたので、私はこのサイトで親切に提供された アドオンパッケージの使用を終了しました 。

CSSファイルのURLパスは絶対パス（/で始まる）なので、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;}
1
mppfiles

グリフィコン を使用するだけで、CSSを設定するだけで色を変更できます。

#myglyphcustom {
    color:#F00;
}
0
Valter Lorran

この古い記事にこのスニペットを追加することができると思いました。アイコンがフォントになる前に、これは私が過去にやったことです：

<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の卑劣な答えと非常によく似ていますが、それでも別の画像は使用されません。代わりに、これは<i>要素の背景色をwhiteに設定し、CSSプロパティborder-radiusを使用して<i>要素全体を「丸め」ます。お気づきのとおり、border-radius（7.5px）の値はwidthおよびheightプロパティの値のちょうど半分で（両方とも15px、アイコンは正方形になります）、<i>要素は円形になります。

0
WebWanderer