Font Awesome 5 の使い方（SVG と JavaScript 編）

作成日：2018年6月28日

Font Awesome 5 を SVG として使用する場合のみ使える以下のようなオプションについての説明です。

使用するための準備や基本的な使い方については、以下をご覧ください。

Font Awesome 5 の基本的な使い方

Power Transforms

Font Awesome 5 / Power Transforms

data-fa-transform という Font Awesome 5 のカスタムデータ属性に値を指定することで、拡大・縮小や位置の調整、回転、反転などが可能です。

以下の例ではアイコン画像が見易いように、外側の div 要素に「fa-4x」のクラスを指定して全体を拡大表示しています。また、わかりやすいように背景色を指定しています。

拡大・縮小（Scaling）

アイコンを拡大・縮小するには、data-fa-transform 属性に「grow-#（拡大）」、「shrink-#（縮小）」を指定します。

「#」には任意の数値（小数可能）を指定し、単位は「1/16em」です。

アイコンのみが拡大・縮小され、そのコンテナの大きさは変わりません。わかりやすいように背景色を指定しています。

<div class="fa-4x">
  <i class="fas fa-magic" data-fa-transform="shrink-8"></i>
  <i class="fas fa-magic"></i>
  <i class="fas fa-magic" data-fa-transform="grow-6"></i>
</div>

以下は、サイズを変更するクラス（fa-xs、fa-2x）を使った例です。コンテナも合わせて拡大・縮小されます。

<div class="fa-4x">
  <i class="fas fa-magic fa-xs"></i>
  <i class="fas fa-magic"></i>
  <i class="fas fa-magic fa-2x"></i>
</div>

位置の調整（Positioning）

アイコンの位置の調整（移動）をするには、data-fa-transform 属性に以下のいずかを指定します。

  • up-#（上方向に移動）
  • down-#（下方向に移動）
  • left-#（左方向に移動）
  • right-#（右方向に移動）

「#」には任意の数値（小数可能）を指定し、単位は「1/16em」です。

アイコンのみが移動され、そのコンテナの位置は変わりません。わかりやすいように背景色を指定しています。

<div class="fa-4x">
  <i class="fas fa-magic" data-fa-transform="shrink-8"></i>
  <i class="fas fa-magic" data-fa-transform="shrink-8 up-6"></i>
  <i class="fas fa-magic" data-fa-transform="shrink-8 right-6"></i>
  <i class="fas fa-magic" data-fa-transform="shrink-8 down-6"></i>
  <i class="fas fa-magic" data-fa-transform="shrink-8 left-6"></i>
</div>

回転と反転（Rotating & Flipping ）

アイコンを回転するには、data-fa-transform 属性に「rotate-#」を指定します。

「#」には、角度を示す数値（負の値も可能）を指定します。

以下の6つ目の例には負の値を指定しています。

<div class="fa-4x">
  <i class="fas fa-magic"></i>
  <i class="fas fa-magic" data-fa-transform="rotate-90"></i>
  <i class="fas fa-magic" data-fa-transform="rotate-180"></i>
  <i class="fas fa-magic" data-fa-transform="rotate-270"></i>
  <i class="fas fa-magic" data-fa-transform="rotate-25"></i>
  <i class="fas fa-magic" data-fa-transform="rotate--30"></i>
</div>

data-fa-transform 属に「flip-v」という値を指定すると、垂直方向に反転し、「flip-h」と言う値を指定すると水平方向に反転することができます。

両方を一緒に指定することもできます。（最後の例）

<div class="fa-4x">
  <i class="fas fa-magic"></i>
  <i class="fas fa-magic" data-fa-transform="flip-v"></i>
  <i class="fas fa-magic" data-fa-transform="flip-h"></i>
  <i class="fas fa-magic" data-fa-transform="flip-v flip-h"></i>
</div>

マスク（Masking）

Font Awesome 5 / Masking

２つのアイコン画像を使って、そのうちの１つの画像で切り抜くことにより１つのアイコンを作成することができます。

まず、切り抜く側のアイコン（この例ではハート：fas fa-heart）を記述します。

<p class="fa-4x"><i class="fas fa-heart"></i></p>

続いて切り抜かれる側（外側）のアイコン（この例では吹き出し：fas fa-comment）を data-fa-mask カスタムデータ属性を使って指定します。

<p class="fa-4x"><i class="fas fa-heart" data-fa-mask="fas fa-comment"></i></p>

切り抜く側のアイコン（ハート）が大きいので shrink-#（拡大・縮小） を使って大きさを調整します。

<p class="fa-4x">
<i class="fas fa-heart" data-fa-transform="shrink-10" data-fa-mask="fas fa-comment"></i>
</p>

必要に応じて up-# や left-# など（位置の調整）を使って、位置を調整することもできます。また、背景色を指定してみると、切り抜かれていることが確認できます。

<p class="fa-4x">
<i class="fas fa-heart" data-fa-transform="shrink-10 up-1.6 right-1.25" data-fa-mask="fas fa-comment" style="background:pink"></i>
</p>

以下も、マスクを使った例です。

<div class="fa-4x">
  <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment"></i>
  <i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle"></i>
  <i class="fas fa-bomb" data-fa-transform="shrink-6" data-fa-mask="fas fa-square"></i>
</div>

レイヤー・テキスト・カウンター

Font Awesome 5 / Layering, Text, & Counters

アイコンを複数重ねたり、アイコンにテキストを重ねることもできます。また、カウンターを表示することもできます。

アイコンを重ねる（Layering）

従来のアイコンを重ねる方法（Stacked Icons）では、２つのアイコンしか重ねることができませんでしたが、レイヤーを使えば２つ以上の複数のアイコンやテキストを重ねることができます。

また、data-fa-transform 属性を使って大きさや位置の調整も可能です。

レイヤーを使うには、重ねるアイコンやテキスト全体を「fa-layers」と言うクラスを指定した span タグ等で囲みます。また、それぞれのアイコンの幅を揃えるため、「fa-fw」と言うクラスも指定しておきます。

以下の例では、全体を大きく表示するために、外側の div 要素に「fa-4x」クラスを指定しています。

<div class="fa-4x">
  <span class="fa-layers fa-fw">
　ここに重ねるアイコンを記述
  </span>
</div>

以下の例では、エンベロープ（fas fa-envelope）の上にハート（fas fa-heart）を重ねて表示します。

後から記述されたアイコンが前面に表示されます。

<div class="fa-4x">
  <span class="fa-layers fa-fw">
    <i class="fas fa-envelope"></i>
    <i class="fas fa-heart"></i>
  </span>
</div>

ハートが大きすぎるので shrink-#（拡大・縮小） を使って大きさを調整します。また、ハートは黒の塗りつぶしなので、「fa-inverse」と言うクラスを指定して色を反転させます。

<div class="fa-4x">
  <span class="fa-layers fa-fw">
  <i class="fas fa-envelope"></i>
  <i class="fas fa-heart fa-inverse" data-fa-transform="shrink-11"></i>
  </span>
</div>

ハートの位置を up-#（位置の調整）を使って調整します。また、ハートに色を指定します。（ハートに色を指定したので、「fa-inverse」と言うクラスは不要になります）

必要に応じて data-fa-transform 属性に「rotate-#」を指定して、角度を調整することもできます。

<div class="fa-4x">
  <span class="fa-layers fa-fw">
  <i class="fas fa-envelope"></i>
  <i class="fas fa-heart" data-fa-transform="shrink-11 up-2" style="color:Tomato"></i>
  </span>
</div>

以下は4つのアイコンを重ねた例です。マスクとは異なり、切り抜かれていないので背景色を指定しても背景色は透けて見えません。

<p class="fa-4x">
  <span class="fa-layers fa-fw" style="background:skyblue">
    <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
    <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
    <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
    <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
  </span>
</p>

テキストを重ねる（Text）

レイヤーを使えば、テキストも簡単に重ねることができます。

アイコンを重ねるのと同様に、アイコンとテキストを「fa-layers」と言うクラスを指定した span タグ等で囲みます。（fa-fw クラスも指定しておきます）

テキストのレイヤーは span タグ等を使って「fa-layers-text」と言うクラスを指定します。

以下は「fas fa-certificate」と言うアイコンの上に「NEW」と言うテキストを重ねる例です。

後から記述された要素が前面に表示されます。

<p class="fa-4x">      
  <span class="fa-layers fa-fw">
    <i class="fas fa-certificate"></i>
    <span class="fa-layers-text">NEW</span>
  </span>
</p>

NEW

テキストが大きすぎるので shrink-#（拡大・縮小） を使って大きさを調整します。また、テキストに「fa-inverse」と言うクラスを指定して色を反転させます。

<p class="fa-4x">      
  <span class="fa-layers fa-fw">
    <i class="fas fa-certificate"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5">NEW</span>
  </span>
</p>

NEW

更に「rotate-#」を指定して角度を調整し、テキストに style 属性で文字の太さと色を指定します。

<p class="fa-4x">      
  <span class="fa-layers fa-fw">
    <i class="fas fa-certificate"></i>
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900; color: yellow">NEW</span>
  </span>
</p>

NEW

テキストのレイヤー（fa-layers-text クラスを指定した要素）に対しても data-fa-transform 属性を使って、拡大・縮小、回転、位置の調整が自由に行えます。

カウンターの表示（Counters）

カウンターもテキストと同じように簡単に表示できます。カウンターを表示する要素を span タグ等を使って記述し、「fa-layers-counter」と言うクラスを指定します。

アイコンやテキストを重ねるのと同様に、アイコンとカウンター（span 要素）を「fa-layers」と言うクラスを指定した span タグ等で囲みます。（fa-fw クラスも指定しておきます）

<p class="fa-4x">
  <span class="fa-layers fa-fw">
    <i class="fas fa-envelope"></i>
    <span class="fa-layers-counter" style="background:Tomato">1,419</span>
  </span>
</p>

1,419

カウンターの位置を調整には以下のクラスを指定します。

  • fa-layers-bottom-left（左下）
  • fa-layers-bottom-right（右下）
  • fa-layers-top-left（左上）
  • fa-layers-top-right（右上：デフォルト）
<p class="fa-4x">
  <span class="fa-layers fa-fw">
    <i class="fas fa-envelope"></i>
    <span class="fa-layers-counter fa-layers-bottom-left" style="background:darkolivegreen">1,419</span>
  </span>
</p>

1,419