web-dev-qa-db-ja.com

Font Awesome Iconsのアイコンの色、大きさ、影の付け方

Font Awesomeの アイコン からアイコンの色、サイズ、影をどのようにスタイルすることができますか？

例えば、Font Awesomeの site はいくつかのアイコンを白で、いくつかを赤で表示しますが、それらをどのようにスタイルするかについてのCSSは表示しません...

enter image description here

csstwitter-bootstrapiconsstylesfont-awesome-4
316
Elias7

それらが単にフォントであることを考えると、あなたはそれらをフォントとしてスタイルすることができるはずです：

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
426
David Thomas

スタイルをインラインで追加することもできます。

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>
137
dandrews

ブートストラップを同時に使用している場合は、次のものを使用できます。

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

さもないと：

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
97
Elgs Qian Chen

FontAwesomeのアイコンの色がtext-info、text-errorなどに反応するように見えます。

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
42
user1695595

inyour.cssファイル：

    *.icon-white {color: white}
    *.icon-silver {color: silver}

inyour.htmlファイル：

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
17
gingin

Font Awesomeアイコンの色を変えるための本当に簡単な方法があります。

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>

あなたはあなたの好みに合わせて16進コードを変更することができます。注：iタグ内にstyle="color:#00cc6a"がない限り、テキストの色によってアイコンの色も変わります。

10
Calum Childs

http://fortawesome.github.io/Font-Awesome/examples/ /

<i class="icon-thumbs-up icon-3x main-color"></i>

ここで私はCSSで主色がクラスであるグローバルスタイルを定義しました、私の場合それは水色の色相です。 Font Awesomeを含むアイコンでインラインスタイルを使用するとうまくいくことがわかりました。特に、色を意味的に命名した場合、つまり別の色が必要な場合はnav-colorなどにしてください.

彼らのウェブサイト上のこの例と、私の例の書き方では、Font Awesomeの最新版でサイズを調整する構文が少し変更されました。以前は次のようになっていました。

icon-xxlarge

ここで私は使わなければなりません：

icon-3x

もちろん、これはFont Awesomeのどのバージョンを環境にインストールしたかによって異なります。お役に立てれば。

8
kinghenry14

FA 4.4.0を使用して追加する

.text-danger
    color: #d9534f

ドキュメントのCSSにして使用する

 <i class="fa fa-ban text-danger"></i>

色を赤に変更します。あなたはどんな色にでもあなた自身を設定することができます。

8
Steve Gutierrez

FontAwesome 4.0では、クラスは 'fa-2x'、 'fa-3x'に変わりました。

7
angelokh

単純にあなたのcssファイルでクラスを定義し、それをhtmlファイルにカスケードすることができます。

<i class="fa fa-plus fa-lg green"></i>

今CSSで書き留めて

.green{ color:green}
6
gdmanandamohon

サイズについて：fa-lg、fa-2x、fa-3x、fa-4x、fa-5x。

カラーの場合：<i class="fa fa-link fa-lg" aria- hidden="true"style="color:indianred"></i>シャドウの場合：.fa-linkedin-square {text-shadow：3px 6px＃272634; ``

6
arif imtiaz

リンクを参照してください http://www.w3schools.com/icons/fontawesome_icons_intro.asp

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
5
Brandon Yang

単にフォントが素晴らしい定義済みクラス名をターゲットにする

例：

HTML

<i class="fa fa-facebook"></i>

CSS

i.fa {
    color: red;
    font-size: 30px;
}
4
Jonca33

BootstrapCDNから直接アイコンを使用しようとしたときにも同じ問題が発生しました（最も簡単な方法）。それから私はCSSファイルをダウンロードし、それを私のサイトのCSSフォルダのCSSファイルにコピーしました（フォント素晴らしいドキュメントの「簡単な方法」のところで説明されています）。

4
Thanushka

クレジット： Font Awesomeのアイコンの色を変えることはできますか？

（この答え その答えに を付けて）

（ブックマークアイコンの場合は、例えば:)

inyour.cssファイル：

.icon-bookmark.icon-white {
    color: white;
}

inyour.htmlファイル：

<div class="icon-bookmark icon-white"></div>
3
therobyouknow

Font Awesome 5 SVG versionの場合

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
2
czLukasss

Pまたはspanでiタグをラップすると、ブートストラップCSSクラスを使用できます。

<p class="text-success"><i class="fa fa-check"></i></p>
2
etlds

すでに指摘したように、素晴らしいフォントアイコンはテキストであるため、適切なCSS属性を使用してスタイルを設定します。例えば：

.fa-Twitter-square {
    font-size: 15px;
    color: red;
}

私にはかなり起こることですが、アイコンのサイズがまったく変わらない場合は、font-size属性に "！important"を追加してください。

.fa-Twitter-square {
    font-size: 15px !important;
    color: red;
}
1
gmartinss

.fa-xxxアイコンのcssプロパティを動的に変更します。

<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>' 
</a>
</li>
<script>
  $(document).ready(function(){
   $('li.nws').on("focusin", function(){
    $('.fa-bolt').addClass('lightning');
   });
 });
</script>

<style>
.lightning{ /*do something cool like shutter*/}
</style>
0
yardpenalty

私はあなたがfa-5xなどのような内蔵フォント素晴らしいスタイルを使用することをお勧めしません。彼らがそれを変更するかもしれないという恐れのために、あなたは最新の標準に会うためにあなたのアプリケーションコードを追いかける必要があるでしょう。これを避けるためには、スタイルを統一したい各フォントクラスを同じクラスに統一してください。

<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-Twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>

こちらのクラスはfa-sabi-social-iconsです。

それから、あなたのcssであなたは普通のフォントをスタイルするのと同じcssルールを使ってフォントをスタイルすることができます。例えば

.fa-sabi-social-icons {
 color: //your color;
 font-size: // your font-size in px, em or %;
 text-shadow: 2px 2px #FF0000;

}

それはあなたのフォント素晴らしいフォントのスタイルを整えるはずです

0
Lawrence Oputa
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
0
Dan Alboteanu

アイコンのサイズ設定

Web Fonts + CSSとSVG + JSフレームワークの両方には、ページのUIのコンテキストでアイコンのサイズを変更するための基本的なコントロールが含まれています。

あなたのように使用できます

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

0
TarangP