前回『超便利！絵文字みたいなアイコンフォント「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倍
サイズ変更コード使用例
どのコードを追記したらどのくらいの大きさに変わるのか、実際に見てみましょう。
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】アイコンの色を変える方法
続いて、アイコンフォントの色を変更する方法です。
やり方は、先ほど紹介した「追加コードにないサイズに変更したい場合」と同じ。
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適用後のアイコンカラー
：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】アイコンフォントに動きをつける方法」という記事で書いているので、ぜひ読んでみてくださいね。
ではでは。
