デザイン PR

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

【Font Awesome】アイコンフォントの色・大きさを変える方法
記事内に商品プロモーションを含む場合があります

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

かわいいアイコンを使うなら、自分のサイトやブログに合うように、アイコンの色や大きさをカスタマイズしたいですよね。

前回は基本的な使い方だけをお伝えしましたが、実は、Webアイコンフォントは好きなようにアレンジ可能。

Font AwesomeならCSSでカスタマイズできるんです。

アイコンフォントを使ってるのに、自分のブログと合ってないと残念に思われることも。違和感があるサイトだと読者が離脱してしまいます。

続きを読めば、アイコンフォントの大きさや色を変える方法がわかりますよ。

アイコンフォントをカスタマイズすると、読者はもちろん、書いてる自分も楽しくなるメリットがあるんです。

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

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

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

Font Awesome

サイズ変更コード使用例

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

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倍デカっw

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

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

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

「0.75倍じゃ小さすぎる」「2倍じゃ小さいけど3倍じゃ大きすぎる」と思うかもしれませんが、ご心配なく。

CSSを使えば、自分の好きなサイズに変更することが可能です。

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

今回は例として、以下のclass名をつけます。

  • 小さいハート:heart_small
  • 大きいハート:heart_large

HTML

<p><i class="fas fa-heart heart_small"></i></p>
<p><i class="fas fa-heart heart_large"></i></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 アイコンサイズ変更について

【Font Awesome】アイコンの色を変える方法

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

やり方は、先ほど紹介した「追加コードにないサイズに変更したい場合」と同じ。

class名を決めて、対応したCSSコードを記述してくださいね。

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

例として、以下class名をつけます。

  • 赤いハート:heart_red
  • 青いハート:heart_blue

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

:赤いハート

:青いハート

HTML

<p><i class="fas fa-heart heart_red"></i></p>
<p><i class="fas fa-heart heart_blue"></i></p>

CSS

/*赤いハート*/
.heart_red{color:#e54747;}
/*青いハート*/
.heart_blue{color:#528fff;}

目立たせたいときは、ブログ全体のカラーに合わせて色を変更するのがおすすめです。

ブランドロゴのアイコンカラー変更例

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

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

:Twitter

:Facebook

:instagram

:YouTube

:LINE

HTML

<p><i class="fab fa-twitter"></i></p>
<p><i class="fab fa-facebook-square"></i></p>
<p><i class="fab fa-instagram"></i></p>
<p><i class="fab fa-youtube"></i></p>
<p><i class="fab fa-line"></i></p>

CSS

/*Twitter*/
.fa-twitter{color:#1da1f2;}
/*Facebook*/
.fa-facebook-square{color:#3b5998;}
/*instagram*/
.fa-instagram{color:#e1306c;}
/*YouTube*/
.fa-youtube{color:#ff0000;}
/*LINE*/
.fa-line{color:#00c300;}

ブランドロゴのアイコンはぜひ色を変えてみてくださいね。

色だけでブランドを認識できるので。

Font Awesomeのアイコンフォントをカスタマイズしよう

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

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

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

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

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

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

ではでは。

ただ書くだけじゃブログ稼げない
ビジネスの勉強をしますか?

COMMENT

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