Font Awesome Iconsのアイコンの色、サイズ、影のスタイルを設定する方法

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

たとえば、Font Awesomeのサイトでは、いくつかのアイコンは白で表示され、一部は赤で表示さCSSれますが、そのようにスタイルを設定する方法については表示されません...

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

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

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

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

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

Bootstrapを同時に使用している場合は、以下を使用できます。

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

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

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

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>

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進コードは好みに応じて変更できます。注：タグstyle="color:#00cc6a"内にがない限り、テキストの色はアイコンの色も変更しますi。

FA 4.4.0を使用して追加

.text-danger
    color: #d9534f

ドキュメントCSSにしてから使用

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

色が赤に変わります。自分だけの色に設定できます。

For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.

For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>

For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}

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

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

ここでは、メインの色がクラスであるCSSでグローバルスタイルを定義しました。私の場合、それは水色の色相です。特にフォントに意味のある名前を付ける場合、つまり、別の色が必要な場合はnav-colorなど、アイコンにインラインスタイルを使用するとうまく機能することがわかりました。

彼らのウェブサイトのこの例では、そして私が自分の例でもどのように書いたかについて、Font Awesomeの最新バージョンは、サイズを調整する構文をわずかに変更しました。

icon-xxlarge

ここで私は使用する必要があります：

icon-3x

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

FontAwesome 4.0では、クラスが「fa-2x」、「fa-3x」に変わります。

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

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

今CSSで書き留めます

.green{ color:green}

font-awesomeの事前定義されたクラス名をターゲットにするだけです

例：

HTML

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

CSS

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

リンクを参照してください 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>

BootstrapCDNから直接アイコンを使用しようとしたときにも同じ問題が発生しました（最も簡単な方法）。次に、CSSファイルをダウンロードして自分のサイトのCSSフォルダーにコピーし、CSSファイル（フォントのすばらしいドキュメントの「簡単な方法」で説明）にコピーすると、すべてが正常に機能し始めました。

クレジット： Font Awesomeのアイコンの色を変更できますか？

（この答えはその答えに基づいています）

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

inyour.cssファイル：

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

inyour.htmlファイル：

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

iタグをpまたはspanでラップしてから、ブートストラップcssクラスを使用できます

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

用フォント素晴らしい5 SVGのバージョン、使用

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

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

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

かなり気になるので、アイコンのサイズがまったく変わらない場合は、font-size属性に「！important」を追加します。

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

アイコンのサイズ変更

Webフォント+ 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

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

text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

fa-5xなどの組み込みの素晴らしいフォントスタイルを使用することはお勧めしません。彼らがそれを変更するのではないかと恐れて、最新の標準を満たすためにアプリケーションコードをチェーンし続ける必要があります。同じクラスを均一にスタイル設定したい各font-awesomeクラスを指定することで、これを単に回避します。

<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;
}

それはあなたのfont-awesomeフォントをスタイリングするはずです