404

Font Awesome の Iconsからアイコンの色、サイズ、影のスタイルを設定するにはどうすればよいですか?

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

赤、白、黒のアイコンが隣にある、さまざまな色のボタンとリンク

4

24 に答える 24

524

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

#elementID {
    color: #fff;
    text-shadow: 1px 1px 1px #ccc;
    font-size: 1.5em;
}
于 2012-09-04T22:50:45.070 に答える
188

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

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

<i class="icon-warning-sign" style="color:red"></i>
于 2013-03-11T19:03:20.837 に答える
46

FontAwesomeアイコンの色は、text-info、text-errorなどに反応するようです。

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
于 2012-09-27T01:41:52.210 に答える
18

your.css ファイル内:

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

your.html ファイル内:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
于 2013-09-12T16:47:31.167 に答える
10

FA 4.4.0 の追加の使用

.text-danger
    color: #d9534f

ドキュメントcssに追加してから使用する

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

色を赤に変更します。独自の色を設定できます。

于 2015-09-12T22:33:57.613 に答える
8

css ファイルでクラスを定義し、それを次のように html ファイルにカスケードするだけです。

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

今すぐcssに書き留めてください

.green{ color:green}
于 2017-01-10T06:33:12.260 に答える
8

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

例:

HTML

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

CSS

i.fa {
    color: red;
    font-size: 30px;
}
于 2018-02-02T16:41:31.450 に答える
6

リンク 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>
于 2016-10-28T06:50:34.633 に答える
5

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

于 2013-07-26T02:21:14.830 に答える
4

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

<p class="text-success"><i class="fa fa-check"></i></p>
于 2016-04-19T03:06:09.003 に答える
2

Font Awesome 5 SVGバージョンの場合は、

filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
于 2018-04-09T19:53:11.563 に答える
0

.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>
于 2016-08-29T05:02:26.913 に答える
-1

font-awesome のスタイリング方法の例を次に示します。

.arrow i.fa {
  color: white !important;
  font-size: 2.2rem;
  opacity: .3;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="arrow d-none d-md-block">
  <i class="fa fa-angle-down"></i>
</div>

それでおしまい。

于 2021-10-21T11:55:09.433 に答える