こんにちは！フローラです。
前回の私の記事ではFont Awesomeについてご紹介しました。
Font Awesomeを使う準備作業、基本的な使い方について解説しましたが、綺麗に表示されましたでしょうか！？
今回は応用編でアイコンのカスタマイズについてご紹介します！

カスタマイズするには？フォントオーサムのclassについて

前回のおさらいです。
WEBページにコメントのアイコンを表示させてみましょう。

<i class=”fa fa-comment” aria-hidden=”true”></i>

class=”fa fa-comment”に注目してください。
デフォルトで準備されているclassは2つです。

fa（フォントオーサムのアイコン全体のクラス） fa-comment（アイコンの種類）ここにアイコンの設定を書き加えます

それではアイコン設定を書き加えてみましょう。

アイコンのサイズを変えてみましょう

サイズは1.3倍～5倍の5種類が用意されています。
今回2倍の大きさにしてみましょう。

<i class=”fa fa-comment fa-2x” aria-hidden=”true”></i>
アイコン２倍

クラスの書き方は下記の通りです。

fa-lg 1.3倍
fa-2x 2倍
fa-3x 3倍
fa-4x 4倍
fa-5x 5倍

アイコンをくるくると回してみましょう

アイコンをくるくる回すにはfa-spinを書き加えます。

<i class=”fa fa-comment fa-spin” aria-hidden=”true”></i>
アイコンをくるくる回す

アイコンの色を変更しましょう

あらかじめ用意されているスタイルはありません。
自分で文字色指定のスタイルを作りましょう。
cssファイル（またはhead内styleタグ、または直接styleタグを追加）に文字色のスタイルを作成します。
今回は赤にしてみます。

<i class=”fa fa-comment” style=”color:red;” aria-hidden=”true”></i>

以上いかがでしたでしょうか？
自分で自由に変更できると楽しくなってきますね！
アイコンのカスタマイズについてはまた続編でご紹介しますのでお楽しみに！！

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, , , ,