【Font Awesome 5】アイコンのサイズや色を変更するカスタマイズ方法

ブログやサイトに手軽に導入できるWEBアイコンの代表格といえばFont Awesome 5です。

Font Awesome 5

Font Awesomeは、表示させるタグIDを指定するだけで簡単にアイコンを設定が可能なサービス。

わざわざ自分でアイコンファイルを用意する必要がなくて非常に便利ですが、デフォルトだとアイコンサイズがすこし小さくて微妙なんですよね。

なんだか文字とサイズ感が合わないし、色が黒くて見づらい！

だよね。
そういう時はCSSを変えて色とサイズを変更してみよう。

当記事では、Font Awesome5で設定したアイコンの大きさや色を変えたり、動きをつける方法をいくつかご紹介します。

Font Awesome 5：カスタマイズ

解説はFontAwesome5が使える状態になっている前提で勧めます。基本がまだお済みでない方は、以下の記事を参考に設定してみてくださいね。

アイコンの色を変えたい

以下の要領でHTML上で色を指定すれば反映されます。

<i class="fas fa-3x fa-award" style="color:red;"></i>

アイコンのサイズを変えたい

Font Awesome5には、サイズ変更用のクラスが用意されています。

<code style="font-size:1em"><i class="fas fa-bomb"></i></code>

アイコンを回転させたい

アイコンの横幅を整えたい

Font Awesome5のWEBアイコンはアイコンのデザイン毎に微妙に幅が違います。なので、並べて使うと微妙に揃わなかったりするんですよね。

そんな時は【fa-fw】クラスを追加することで解消されます。

<i class="fas fa-skating fa-fw"></i>

横幅が揃いましたね。
paddingで調整することも可能ですが、この方がよっぽど楽です。

アイコンに動きをつけたい

標準で使えるのは「fa-spin」「fa-pulse」のふたつ。

いずれもアイコンを回転させるアクションなので、「fa-spinner」アイコンと組み合わせてローディング用として使うと良いでしょう。

アイコンを回転（fa-spin）

<i class="fas fa-3x fa-spinner fa-spin"></i>

アイコンを8ステップ回転（fa-pulse）

<i class="fas fa-3x fa-spinner fa-pulse"></i>

アイコンを重ねて使いたい

2つのアイコンを重ねて使うことも可能。
まず、重ねたい要素を囲む親要素（divやspan）を用意しておき、その中にアイコンのタグコードを記載します。

その後、親要素には【fa-stack】クラス、アイコンには【fa-stack-2x】【fa-stack-1x】を追加します。

<div class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x" style="color:#1DA1F3"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</div>

インラインで折り返す

文章に装飾として折返し表示させたい場合は【fa-pull-left】【fa-pull-right】を使います。

<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<i class="fas fa-quote-right fa-2x fa-pull-right"></i>

アイコンのボーダーをつける

アイコンの回りを囲うようにボーダー（罫線）をつけることもできます。
ボタンっぽいデザインにしたい時に便利。

<i class="fas fa-arrow-right fa-2x fa-bell fa-border"></i>

まとめ

Font Awesome 5は導入も簡単ですし、HTMLにclassを追加するだけで簡単にカスタマイズできて便利です。

うまく使いこなしてブログやサイトデザインに取り入れてみましょう。