「Font Awesomeで何ができるの？」そんな方に便利機能6つ+αをご紹介

こんにちは！ あますた(@amaguristar)です。

• 「フリーで上質なアイコンを使いたい時は「Font Awesome」を使うことは分かったけど設定ってどうするの？」

って方も多いはず。今回は良く使うものを厳選して紹介。

目次

1. サイズを設定
2. 色を設定
3. アイコンの幅を揃える
• リストでアイコンを利用する方法
4. 回転を設定
5. アニメーションを設定
6. アイコンを重ねて表示
7. Font Awesome5で追加された新機能
8. まとめ

基本的な使い方は↓↓↓
>> https://fun.wazn.jp/info/512/

YouTubeでも紹介してます↓↓↓
>> https://youtu.be/PLMyMa0A0K8

サイズを設定

Font Awesomeは簡単にサイズを変更可能。しかも画質も荒くなりません。

Webフォントアイコンなので、テキストのサイズをベースに楽にサイズ調整可能です。

上記のアイコンのコードは下記。

<i class="fas fa-hand-sparkles fa-xs"></i>
<i class="fas fa-hand-sparkles fa-sm"></i>
<i class="fas fa-hand-sparkles fa-lg"></i>
<i class="fas fa-hand-sparkles fa-2x"></i>
<i class="fas fa-hand-sparkles fa-3x"></i>
<i class="fas fa-hand-sparkles fa-4x"></i>
<i class="fas fa-hand-sparkles fa-5x"></i>
<i class="fas fa-hand-sparkles fa-6x"></i>
<i class="fas fa-hand-sparkles fa-7x"></i>
<i class="fas fa-hand-sparkles fa-8x"></i>
<i class="fas fa-hand-sparkles fa-9x"></i>
<i class="fas fa-hand-sparkles fa-10x"></i>

クラスの最後の「fa-」の部分でサイズを調整してます。それぞれの意味をまとめると

class	size
fa-xs	.75em
fa-sm	.875em
fa-lg	1.33em
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-10x」を設定すると、文字の大きさの10倍でアイコンを表示。

文字の大きさによりサイズが決まるので、下記の様な方法でサイズを変えることも可能。

<span style="font-size: 3em;">
  <i class="fas fa-hand-sparkles"></i>
</span>

<span style="font-size: 48px;">
  <i class="fas fa-hand-sparkles"></i>
</span>

「細かく設定したい」という時はこちらの方が設定しやすいと思います。

色を設定

色の設定も簡単。文字と同じ様に扱えるアイコンなので、文字の色を変えるつもりで設定するだけ。

<div class="fa-4x">
  <i class="fas fa-hand-sparkles"></i>
  <i class="fas fa-hand-sparkles" style="color: rgb(255, 0, 0)"></i>
  <i class="fas fa-hand-sparkles" style="color: rgb(0, 255, 0)"></i>
</div>

cssを登録しておけば上記はこんな感じに設定することも可能。

<div class="fa-4x">
  <i class="fas fa-hand-sparkles"></i>
  <i class="fas fa-hand-sparkles red"></i>
  <i class="fas fa-hand-sparkles green"></i>
</div>

注意！
cssについての説明は割愛

フォントに色を付ける感覚で設定できるので簡単です。

アイコンの幅を揃える

アイコンを連続して利用してると、物によってはサイズが違い、上記の様にガチャガチャした見た目になる時があります。

POINT！
分かりやすい様にアイコンの背景に色を付けてます

上記例だと、自転車とカメラアイコンのサイズが若干ですが不揃いなのが分かると思います。アイコンのサイズを統一する方法は簡単で、「fa-fw」クラスを追加するだけ。

<i class="fas fa-anchor fa-fw" style="background: SkyBlue;"></i><br>
<i class="fas fa-balance-scale-left fa-fw" style="background: SkyBlue;"></i><br>
<i class="fas fa-biking fa-fw" style="background: SkyBlue;"></i><br>
<i class="fas fa-camera-retro fa-fw" style="background: SkyBlue;"></i><br>
<i class="fas fa-highlighter fa-fw" style="background: SkyBlue;"></i><br>

「fa-fw」クラスを追加するだけで上記の様に幅が統一されます。

ちなみに、リストでアイコンを利用する場合は

<ul class="fa-ul">
  <li><span class='fa-li'><i class="fas fa-anchor"></i></span>anchor</li>
  <li><span class='fa-li'><i class="fas fa-balance-scale-left"></i></span>balance-scale-left</li>
  <li><span class='fa-li'><i class="fas fa-biking"></i></span>biking</li>
  <li><span class='fa-li'><i class="fas fa-camera-retro"></i></span>camera-retro</li>
</ul>

ulタグにfa-ulクラスを追加し、fa-liクラスでアイコンを囲むだけで利用可能。

注意！
「<i>タグ内のクラスにfa-liを入れても良いのでは？」と思うかもしれませんが、そうすると環境によってはリストの「・」が表示される場合があります

回転を設定

Font Awesomeアイコンは回転させることも簡単。

<div class="fa-4x well">
  <i class="fas fa-biking"></i>
  <i class="fas fa-biking fa-rotate-90"></i>
  <i class="fas fa-biking fa-rotate-180"></i>
  <i class="fas fa-biking fa-rotate-270"></i>
  <i class="fas fa-biking fa-flip-horizontal"></i>
  <i class="fas fa-biking fa-flip-vertical"></i>
  <i class="fas fa-biking fa-flip-both"></i>
</div>

Class	Rotation Amount
fa-rotate-90	90°
fa-rotate-180	180°
fa-rotate-270	270°
fa-flip-horizontal	左右反転
fa-flip-vertical	上下反転
fa-flip-both	左右反転 + 上下反転

もし、回転させる角度を細かく設定したい場合は、

<div class="fa-4x">
    <i class="fas fa-biking" data-fa-transform="rotate-30"></i>30°
    <i class="fas fa-biking" data-fa-transform="rotate--30"></i> -30°
    <i class="fas fa-biking" data-fa-transform="rotate-45"></i>４５°
</div>

data-fa-transformを利用して回転させることも可能です。ただし、data-fa-transformを利用する為にはJavaScriptでFont Awesomeを読み込んでる必要があります。

注意！
詳細は別記事で説明します

アニメーションを設定

アニメーション	設定クラス
	fa-spin
	fa-pulse

Font Awesomeには簡単なアニメーションが設定されています。上記は、どの様に設定してるかというと、

<i class="fas fa-sync-alt fa-3x fa-spin"></i>
<i class="fas fa-sync-alt fa-3x fa-pulse"></i>

という様に、「fa-spin」もしくは「fa-pulse」をクラスに設定しています。

fa-spinを設定すると滑らかに、「fa-pulse」を設定すると8段階で回転させることが可能です。

アイコンを重ねて表示

アイコンを使ってると、「このアイコン、さっきのアイコンと重ねたいな」と思うこともあるはず。その悩みも即解決。

Font Awesomeは、上記の様にアイコンを組み合わせて使うことも可能。

POINT！
Font Awesomeでは、アイコンを重ねて表示することを「スタック」という。

<span class="fa-stack">
  <i class="far fa-square fa-stack-2x"></i>
  <i class="fas fa-recycle fa-stack-1x"></i>
</span>

まず、上記サンプルの<span>タグの様に、重ねたいアイコンをfa-stackクラスで囲む。その後、下に敷くアイコンにfa-stack-2xクラス、重ねるアイコンにfa-stack-1xクラスを追加。

これだけでアイコンを重ねることが可能。

注意！
アイコンを重ねると、通常のアイコンサイズの２倍の大きさで表示される。アイコンのサイズを揃えたい場合、重ねたアイコンサイズを小さくする、もしくは、シングルアイコンのサイズを大きくするなど、工夫が必要

アイコンに「fa-inverse」クラスを適用するとカラーを反転させることも可能。

<span class="fa-stack fa-2x">
  <i class="far fa-square fa-stack-2x fa-inverse"></i>
  <i class="fas fa-recycle fa-stack-1x fa-inverse"></i>
</span>

アイコンにより使い分けると表現の幅が広がります。

Font Awesome5で追加された新機能

「4.回転を設定」でも軽く触れましたが、Font Awesome5から下記の新しい機能が追加されました。

「4.回転を設定」で軽く紹介したものは、「Power Transforms」の機能を利用。これらの機能を利用する為には、
Font AwesomeのSVG + JSバージョンを使用する必要があります。

詳細は別で説明させて頂きます。今回は「こんな機能もあるんだ」っと思って頂ければ、幸いです。

まとめ

いかがだったでしょうか？ Font Awesomeでは多くの機能がデフォルトで利用できる様に考えられてます。

ちょっとしたことなら簡単に実現可能なのでありがたく、また、こだわりたい方は「css」を編集することで好みの設定も可能。

使い慣れたら、自分だけのオリジナルカスタマイズを試してみてはいかがでしょうか？

YouTubeでも紹介してます↓↓↓
>> https://youtu.be/PLMyMa0A0K8

この説明の参考にしたページ↓↓↓
>> Sizing Icons -FontAwesome-

FontAwesomeのまとめ一覧↓↓↓
>> https://fun.wazn.jp/info/969/