前回『超便利!絵文字みたいなアイコンフォント「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】アイコンフォントに動きをつける方法」という記事で書いているので、ぜひ読んでみてくださいね。
ではでは。