![うと](https://uto-room.com/wp-content/uploads/2023/01/question-1.png)
うと
FontAwesomeのサイズと色って簡単に変えられないかな?
FontAwesomeのアイコンはCSSで指定しなくても、HTMLへの簡単な記述追加でカスタマイズする事が出来ます。
\公式サイトはこちらから/
FontAwesomeの色とサイズ変更
今回は、FontAwesomeのサイズ・色と背景色をHTMLで簡単に変更する方法を説明しています。
サイズ変更
まずは、普通にコードを入力してみると…
HTMLコード
<i class="fas fa-cat"></i>
表示結果
表示できました。
この、<>内に、「fa-〇〇」と追記するだけでサイズを変更できます!
HTMLコード
<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>
表示結果
←xs(0.75倍)
←sm(0.875倍)
←lg(1.33倍)
←2x(2倍)
←3x(3倍)
←4x(4倍)
数字を変更すれば、好きな大きさに変更できます。
また、倍率ではなくピクセル単位で指定することもできます。
<>内に、「style=”font-size:〇px;」を追記します。
HTMLコード
<i class="fa fa-dog" style="font-size:30px;"></i>
表示結果
ピクセル谷指定を使えば、自分好みのサイズに変更することができます。
色変更
色を変更するには<>内に、「style=”color:〇;」を追記します。
HTMLコード
<i class="fa fa-paw" style="color:hotpink;"></i>
表示結果
アイコンに色がつき、表現の幅が広がりますね!!
色指定する名前は、下記のサイトを参考に入力してください。
背景色変更
背景の色を変更するには<>内に、「style=”backgound:〇;」を追記します。
HTMLコード
<i class="fa fa-user" style="background:yellow;"></i>
表示結果
サイズ&色&背景色変更
サイズ色も全て変更したいときは、下記のようになります。
HTMLコード
<i class="fa fa-fish fa-5x" style="color:white; background:skyblue;"></i>
大きさ5倍で、文字は白、背景は空色に指定。
表示結果
文字色を白に指定することで、色抜きのような表現ができます。
まとめ
とても簡単に大きさと色を変更することができました!
次は、アニメーションを指定できる方法に挑戦したいと思います。
Coming soon…
コメント