デザイン

【Font Awesome】アイコンフォントの色・大きさを変える方法

【Font Awesome】アイコンフォントの色・大きさを変える方法
こんにちは! Webデザイナーのアズサ(@azusascom)です。

前回『超便利!絵文字みたいなアイコンフォント「Font Awesome」の使い方』という記事を書きました。

今回は続き。アイコンフォントの大きさや色を変える方法をお伝えします。

アイコンの大きさを変える方法

Font Awesomeは、以下コードを追記するだけで簡単に大きさを変えることができるんです。

  • fa-xs:0.75倍
  • fa-lg:1.33倍
  • fa-2x:2倍
  • fa-3x:3倍
  • fa-4x:5倍
  • fa-5x:7倍

サイズ変更コード使用例

どのコードを追記したらどのくらいの大きさに変わるのか、実際に見てみましょう。

HTML

<p><i class="fas fa-heart fa-xs"></i></p><!--0.75倍-->
<p><i class="fas fa-heart"></i></p><!--通常サイズ-->
<p><i class="fas fa-heart fa-lg"></i></p><!--1.33倍-->
<p><i class="fas fa-heart fa-2x"></i></p><!--2倍-->
<p><i class="fas fa-heart fa-3x"></i></p><!--3倍-->
<p><i class="fas fa-heart fa-5x"></i></p><!--5倍-->
<p><i class="fas fa-heart fa-7x"></i></p><!--7倍-->

アイコンサイズ比較

(0.75倍)

(通常サイズ)

(1.33倍)

(2倍)

(3倍)

(5倍)

(7倍)

7倍デカっ!

大きいサイズは使う機会がなさそうですね。

ちょっと大きくするなら1.33倍がちょうどいい。

追加コードにないサイズに変更したい場合

「0.75倍じゃ小さすぎる」「2倍じゃ小さいけど3倍じゃ大きすぎる」なんて場合は、CSSを使って自分の好きなサイズに変更しましょう。

適当なclass名を決め、そのclass名に対応したCSSを記述していきます。

今回は例として、

  • 小さいハート:heart-small
  • 大きいハート:heart-large

というclass名をつけます。

HTML

<p><i class="fas fa-heart  heart-small"></p>
<p><i class="fas fa-heart  heart-large"></p>

CSS

/*0.9倍サイズ*/
.heart-small{font-size: 0.9em;}
/*2.5倍サイズ*/
.heart-large{font-size: 2.5em;}

CSS適用後のアイコンサイズ

(0.9倍)

(2.5倍)

まずはサイズ調整せずにアイコンフォントを使用し、プレビュー画面で文字の大きさとのバランスを確認するのがいいですね。

必要があればアイコンフォントを拡大・縮小してください。

追記コードの一覧などは「Font Awesome」公式サイトにも掲載されてるので、ぜひ見てみてくださいね。

Font Awesome アイコンサイズ変更について

アイコンの色を変える方法

続いて、アイコンフォントの色を変更する方法です。

やり方は、先ほど紹介した「追加コードにないサイズに変更したい場合」と同じ。 class名を決めて、対応したCSSコードを記述してくださいね。

CSSを使用したアイコンカラー変更例

今回は例として、

  • 赤いハート:heart-red
  • 青いハート:heart-blue

というclass名をつけます。

HTML

<p><i class="fas fa-heart heart-red"></p>
<p><i class="fas fa-heart heart-blue"></p>

CSS

/*赤いハート*/
.heart-red{color:#e54747}
/*青いハート*/
.heart-blue{color:#528fff}

CSS適用後のアイコンカラー

(赤いハート)

(青いハート)

目立たせたいときに色を変えるのがおすすめです。

また、TwitterやFacebookなどのアイコンは、ブランドロゴと同じ色にするとわかりやすくなりますよ。

ブログに合わせてアイコンをカスタマイズしよう

今回はアイコンフォントの大きさ・色の変更についてお伝えしました。

  • HTMLにコードを追記するだけでサイズ変更できる。
  • CSSで自分好みのサイズに変更できる。
  • CSSで自分好みの色に変更できる。

アイコンフォントは、自分のブログに合わせて大きさや色を変えられます。

目印になるアイコンを使って、読みやすいブログにしてくださいね。

実は、アイコンフォントは色や大きさの変更だけでなく、アニメーションをつけて動かせるんです。

詳細は「【Font Awesome】アイコンフォントに動きをつける方法」って記事に書いたので、ぜひ読んでみてくださいね。

ではでは。

稼ぐ力を身につけて運命を変えよう!
ビジネスの勉強、試してみる価値あるかも。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です