【FontAwesome】HTMLでサイズと色を変更する方法

うと

FontAwesomeのサイズと色って簡単に変えられないかな？

FontAwesomeのアイコンはCSSで指定しなくても、HTMLへの簡単な記述追加でカスタマイズする事が出来ます。

FontAwesomeの色とサイズ変更

今回は、FontAwesomeのサイズ・色と背景色をHTMLで簡単に変更する方法を説明しています。

サイズ変更

まずは、普通にコードを入力してみると…

<i class="fas fa-cat"></i>

表示できました。

この、＜＞内に、「fa-〇〇」と追記するだけでサイズを変更できます！

<i class="fas fa-cat fa-xs"></i>
<i class="fas fa-cat fa-sm"></i>
<i class="fas fa-cat fa-lg"></i>
<i class="fas fa-cat fa-2x"></i>
<i class="fas fa-cat fa-3x"></i>
<i class="fas fa-cat fa-4x"></i>

数字を変更すれば、好きな大きさに変更できます。

また、倍率ではなくピクセル単位で指定することもできます。

＜＞内に、「style=”font-size:〇px;」を追記します。

<i class="fa fa-dog" style="font-size:30px;"></i>

ピクセル谷指定を使えば、自分好みのサイズに変更することができます。

色変更

色を変更するには＜＞内に、「style=”color:〇;」を追記します。

<i class="fa fa-paw" style="color:hotpink;"></i>

アイコンに色がつき、表現の幅が広がりますね！！

色指定する名前は、下記のサイトを参考に入力してください。

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

背景色変更

背景の色を変更するには＜＞内に、「style=”backgound:〇;」を追記します。

<i class="fa fa-user" style="background:yellow;"></i>

サイズ＆色＆背景色変更

サイズ色も全て変更したいときは、下記のようになります。

<i class="fa fa-fish fa-5x" style="color:white; background:skyblue;"></i>

大きさ５倍で、文字は白、背景は空色に指定。

文字色を白に指定することで、色抜きのような表現ができます。

よく使う 「Font Awesome 5」アイコン一覧表

FontAwesomeのアイコンは便利だからよく使うけど、毎回検索してコピペしていませんか？公式サイトはよくバグるし、たまに上手く表示されない文字もあったりして使いずらい。そんな時はこちらのアイコン一覧をぜひ活用してください。

uto-room.com

2023.02.08

まとめ

とても簡単に大きさと色を変更することができました！

次は、アニメーションを指定できる方法に挑戦したいと思います。