Font Awesome の Iconsからアイコンの色、サイズ、影のスタイルを設定するにはどうすればよいですか?
たとえば、Font Awesome のサイトでは、白と赤でいくつかのアイコンが表示されますが、CSS
そのようにスタイルを設定する方法は表示されません...
Font Awesome の Iconsからアイコンの色、サイズ、影のスタイルを設定するにはどうすればよいですか?
たとえば、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>
FontAwesomeアイコンの色は、text-info、text-errorなどに反応するようです。
<div style="font-size: 44px;">
<i class="icon-umbrella icon-large text-error"></i>
</div>
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>
FA 4.4.0 の追加の使用
.text-danger
color: #d9534f
ドキュメントcssに追加してから使用する
<i class="fa fa-ban text-danger"></i>
色を赤に変更します。独自の色を設定できます。
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 ドキュメントの「簡単な方法」で説明されています)、すべてが正常に機能し始めました。
i タグを p または span でラップすると、ブートストラップ css クラスを使用できます
<p class="text-success"><i class="fa fa-check"></i></p>
Font Awesome 5 SVGバージョンの場合は、
filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
.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>
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>
それでおしまい。