WordPress

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

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

Font Awesome 5

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

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

運営者:CHI

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

運営者:TOMO

だよね。
そういう時は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>
クラス名 大きさ 表示結果
fa-xs .75em
fa-sm .875
fa-lg fa-2x
fa-2x 2em
fa-3x 3em
fa-4x 4em
fa-5x 5em
fa-6x 6em
fa-7x 7em
fa-8x 8em
fa-9x 9em
fa-10x 10em

アイコンを回転させたい

クラス名 傾き 表示結果
fa-rotate-90 アイコンを90°回転
fa-rotate-180 アイコンを180°回転
fa-rotate-270 アイコンを270°回転
fa-flip-horizontal 水平方向に回転
fa-flip-vertical 垂直方向に回転
fa-flip-both 水平および垂直方向に反転
fa-flip-bothはVer5.7以上でないと使えないので注意

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

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

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow

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

<i class="fas fa-skating fa-fw"></i>
Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow

横幅が揃いましたね。
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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

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

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

まとめ

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

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

TOP