ウェブアイコン「Font Awesome」『Version 6』の紹介

ウェブアイコン「Font Awesome」の『Version 6』が2022年2月にリリースされたのでそれを紹介したいと思います。

ウェブアイコン「Font Awesome」『Version 6』の導入方法

導入方法

ダウンロードする場合

まず、「Font Awesome」のページに行って、「Sign In」してください。

メールアドレスとパスワードを入れて、サインインしてください。

まだ、アカウントを保持されていない場合には『Create a Free Font Awesome Account』をクリックして、アカウントを作成してください。

サインイン後、トップページに戻ると「Download」ボタンが現れるので、押してください。

「6.0.0 For The Web」の『Free For Web』をクリックすると、Font Awesomeを利用するためのライブラリ一式をZIP形式の書庫ファイルをダウンロードすることができます。

CSSファイルインクルード

ダウンロードした書庫ファイルにある「css」の直下にある『all.css』ファイルを読み込んでください。

これで準備完了です。

<link href="/assets/fontawesome-free-6.0.0-web/css/all.css" rel="stylesheet">

Your Kitsを利用する場合

「Font Awesome」のサーバ側で提供するライブラリをそのまま利用することもできます。

まず、サインイン後、トップページの『Your Kits』をクリックしてください。

「Your Kits」のページが開くと次に歯車アイコン(Settings)をクリックしてください。

Versionが『Latest 5.x』となっていた場合には、『Latest 6.x』に変えてください。

変更後、『Save Changes』をクリックして変更の保存をしてください。

変更後、『Changes Saved!』とのメッセージが表示され、少し時間をおいてから、変更が有効になるようです。

次に、『How to Use』をクリックしてください。

すると、scriptタグのコードを取得できるので『Copy Kit Code』をクリックしてコードをコピーしてください。

このコードをコピーして、HTMLのソースにコピーするとセットアップ完了です。

<script src="https://kit.fontawesome.com/xxxxxxxxx.js" crossorigin="anonymous"></script>

利用方法

HTMLマークアップ


	<!-- solid style -->
	<i class="fa-solid fa-user"></i>

	<!-- regular style -->
	<i class="fa-regular fa-user"></i>

	<!-- light style [Proのみ]-->
	<i class="fa-light fa-user"></i>

	<!-- duotone style [Proのみ]-->
	<i class="fa-duotone fa-user"></i>

	<!-- all new thin style [Proのみ] -->
	<i class="fa-thin fa-user"></i>

	<!--brand icon-->
	<i class="fa-brands fa-github-square"></i>

<i>タグを書いて、classに利用したいスタイルのクラスとアイコンのクラスを指定してください。

「Font Awesome」『Version 6』のアイコン紹介

アイコン数

  • アイコン数(プロ版):14,865
  • アイコン数(無料版):1,748
  • カテゴリー数:66
  • スタイル数:5

スタイル

  • Solid
  • Regular
  • Light(プロ版のみ)
  • Thin(プロ版のみ)
  • Duotone(プロ版のみ)

加えて、Brands(ブランド)アイコンがあります。

ただ、無料版とプロ版で利用できるスタイルにかなり制限があります。

アイコンのスタイリング

基本形

  <span style="font-size: 3em; color: Tomato;">
    <i class="fas fa-camera"></i>
  </span>

  <span style="font-size: 48px; color: Dodgerblue;">
    <i class="fas fa-camera"></i>
  </span>

  <span style="font-size: 3rem;">
    <span style="color: Mediumslateblue;">
    <i class="fas fa-camera"></i>
    </span>
  </span>

style属性を設定することでアイコンの大きさや色などを変更できます。

アイコンのサイズ指定

相対サイズ

Font Awesomeでは以下のようなクラスがあり、サイズを変更することができます。

なお、フォントサイズはピクセル単位での大きさの一覧は以下のようになります。

クラスフォントサイズピクセル
fa-2xs0.625em10px
fa-xs0.75em12px
fa-sm0.875em14px
(無し)1em16px
fa-lg1.25em20px
fa-xl1.5em24px
fa-2xl2em32px

fa-2xs

fa-xs

fa-sm

(なし)

fa-lg

fa-xl

fa-2xl

<p><i class="fa-solid fa-coffee fa-2xs"></i> fa-2xs</p>
<p><i class="fa-solid fa-coffee fa-xs"></i> fa-xs</p>
<p><i class="fa-solid fa-coffee fa-sm"></i> fa-sm</p>
<p><i class="fa-solid fa-coffee"></i> (なし)</p>
<p><i class="fa-solid fa-coffee fa-lg"></i> fa-lg</p>
<p><i class="fa-solid fa-coffee fa-xl"></i> fa-xl</p>
<p><i class="fa-solid fa-coffee fa-2xl"></i> fa-2xl</p>

文字通りの指定(リテラルサイジング)

以下のようなクラスが用意されていて1から10までのクラスが用意されています。

クラスフォントサイズ
fa-1x1em
fa-2x2em
fa-3x 3em
fa-4x4em
fa-5x5em
fa-6x6em
fa-7x7em
fa-8x8em
fa-9x9em
fa-10x10em

fa-1x

fa-2x

fa-3x

fa-4x

fa-5x

fa-6x

fa-7x

fa-8x

fa-9x

fa-10x

<p><i class="fa-solid fa-camera fa-1x"></i> fa-1x</p>
<p><i class="fa-solid fa-camera fa-2x"></i> fa-2x</p>
<p><i class="fa-solid fa-camera fa-3x"></i> fa-3x</p>
<p><i class="fa-solid fa-camera fa-4x"></i> fa-4x</p>
<p><i class="fa-solid fa-camera fa-5x"></i> fa-5x</p>
<p><i class="fa-solid fa-camera fa-6x"></i> fa-6x</p>
<p><i class="fa-solid fa-camera fa-7x"></i> fa-7x</p>
<p><i class="fa-solid fa-camera fa-8x"></i> fa-8x</p>
<p><i class="fa-solid fa-camera fa-9x"></i> fa-9x</p>
<p><i class="fa-solid fa-camera fa-10x"></i> fa-10x</p>

固定幅アイコン

アイコンを固定幅にするにはclassに「fa-fw」を指定してください。

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow
<div style="font-size: 2rem;">
  <div><i class="fa-solid fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fa-solid fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fa-solid fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fa-solid fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fa-solid fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

「fa-fw」を指定しないと以下のようになってしまいます。

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow

リスト(<ul>や<li>)にアイコンを利用する

<ul>や<ol>にクラス『fa-ul』とリスト(<li>)に固定幅であるクラス『fa-li』を設定すると、リストのしるしにFont Awesomeのアイコンを利用できます。

クラス説明
fa-ululタグやolタグに適用するクラス
fa-liliタグに適用するクラス

また、カスタムプロパティも用意されています。

カスタムプロパティ説明
–fa-li-widthアイコンの幅を指定できるプロパティ
–fa-li-marginアイコンのマージンを指定できるプロパティ
  • 完了タスク1
  • 完了タスク2
  • 仕掛中
  • 未着手
  • 新規タスク
  • 警告

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>完了タスク1</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>完了タスク2</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>仕掛中</li>
  <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>未着手</li>
  <li><span class="fa-li" style="--fa-li-width: 4em;" ><i class="fa-solid fa-star"></i></span>新規タスク</li>
  <li><span class="fa-li" style="--fa-li-margin: 2em;"><i class="fa-solid fa-triangle-exclamation"></i></span>警告</li>
</ul>

アイコンの回転

以下のようなクラスを指定することで、アイコンを回転させることができます。

クラス
fa-rotate-9090度アイコンを回転
fa-rotate-180180度アイコンを回転
fa-rotate-270270度アイコンを回転
fa-flip-horizontal水平(左右)にアイコンを逆転させる
fa-flip-vertical垂直(上下)にアイコンを逆転させる
fa-flip-both垂直水平(上下左右)にアイコンを逆転させる
fa-rotate-byCSSのプロパティ「–fa-rotate-angle」と同時に使用することで、
「–fa-rotate-angle」の指定度数分、回転させる
<div class="fa-3x">
    <i class="fa-solid fa-snowboarding"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-90"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-180"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-270"></i>
    <i class="fa-solid fa-snowboarding fa-flip-horizontal"></i>
    <i class="fa-solid fa-snowboarding fa-flip-vertical"></i>
    <i class="fa-solid fa-snowboarding fa-flip-both"></i>
</div>

<div class="fa-3x">
    <i class="fa-solid fa-snowboarding"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: -45deg;"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 19deg;"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 80deg;"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 0.25deg;"></i>
    <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: -0.25deg;"></i>
</div>

アニメーション

Font Awesome ではアイコンに効果を加えることができます。

紹介していきましょう。

Beat(ビート)

クラス説明
fa-beat拡大縮小を繰り返す効果です

Beatと同時に利用する効果のユティリティは以下の通りです。

ユティリティ説明
-fa-beat-scale拡大時のアイコンサイズを調整できます
<div class="fa-3x">
  <i class="fa-solid fa-circle-plus fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;" ></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2.0;"></i>
</div>

Fade(フェード)

クラス説明
fa-beatアイコンの透明度が変わる効果です

Fadeと同時に利用する効果のユティリティは以下の通りです。

ユティリティ説明
–fa-fade-opacity効果に適用できる透明度を指定できます(0.0~1.0)
<div class="fa-3x">
  <i class="fa-solid fa-triangle-exclamation fa-fade"></i>
  <i class="fa-solid fa-skull-crossbones fa-fade"></i>
  <i class="fa-solid fa-desktop fa-fade"></i>
  <i class="fa-solid fa-i-cursor fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.1;" ></i>
</div>

Beat-Fade(ビートフェード)

BeatとFadeを合わせた効果となります。拡大縮小と視覚的にも薄くなったり濃くなったりする効果です。

クラス説明
fa-beat-fade拡大縮小をしつつ透明度が変化する効果です。

Beat-Fadeと同時に利用する効果のユティリティは以下の通りです。

ユティリティ説明
–fa-beat-fade-opacity効果に適用できる透明度を指定できます(0.0~1.0)
–fa-beat-fade-scale拡大時のアイコンサイズを調整できます

Bounce(バウンス)

アイコンを弾ませる効果です。

クラス説明
fa-bounceアイコンを弾ませる効果です

Bounceと同時に利用する効果のユティリティは以下の通りです。

ユティリティ説明
–fa-bounce-rebound着地後、再バウンドの程度を指定できます。
–fa-bounce-height,バウンドの高さを指定できます。
–fa-bounce-start-scale-xバウンド開始時の横のゆがみの程度を指定できます
–fa-bounce-start-scale-yバウンド開始時の縦のゆがみの程度を指定できます
-fa-bounce-jump-scale-xジャンプ時の横のゆがみの程度を指定できます
-fa-bounce-jump-scale-yジャンプ時の縦のゆがみの程度を指定できます。
–fa-bounce-land-scale-x着地時の横のゆがみの程度を指定できます
–fa-bounce-land-scale-y着地時の縦のゆがみの程度を指定できます

<div class="fa-3x">
  <i class="fa-solid fa-frog fa-bounce"></i>
  <i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; --fa-bounce-rebound:-0.5em; " ></i>
  <i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; --fa-bounce-rebound: 0;" ></i>
  <i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1.5; --fa-bounce-start-scale-y: 2.0; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1;--fa-bounce-rebound:-0.125em;--fa-bounce-height: -0.8em " ></i>
  <i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1.5; --fa-bounce-jump-scale-y: 2.0; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1;--fa-bounce-rebound:-0.5em; " ></i>
  <i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1.5; --fa-bounce-land-scale-y: 2.5; --fa-bounce-rebound: 0;" ></i>
</div>

Flip(フリップ)

Flipは回転の効果となります。

クラス説明
fa-flipアイコンを回転させる効果です

Flipと同時に利用する効果のユティリティは以下の通りです。

ユティリティ説明
–fa-flip-x回転させる軸のx座標を指定できます(0.0~1.0)
–fa-flip-y回転させる軸のy座標を指定できます(0.0~1.0)
–fa-flip-z回転させる軸のz座標を指定できます(0.0~1.0)
–fa-flip-angle回転させる程度(角度)を時計回りで直接指定できます。
負数を指定する場合は、反時計回りの角度になります。
単位として「deg」を付与してください
<div class="fa-3x">
  <i class="fa-solid fa-compact-disc fa-flip"></i>
  <i class="fa-solid fa-money-check-dollar fa-flip" style="--fa-animation-duration: 3s;" ></i>
  <i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0;" ></i>
  <i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 0; --fa-flip-y: 1;" ></i>
  <i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 0; --fa-flip-y: 0; --fa-flip-z: 1;" ></i>
  <i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 0.5; --fa-flip-y: 0.5;" ></i>
  <i class="fa-solid fa-scroll fa-flip" style="--fa-flip-angle:270deg" ></i>
  <i class="fa-solid fa-scroll fa-flip" style="--fa-flip-angle:-80deg" ></i>
</div>

Shake(シェイク)

Shakeはアイコンに震えの効果を加えます。

クラス説明
fa-shakeアイコンを震わせる効果を与えます
<div class="fa-3x">
  <i class="fa-solid fa-bell fa-shake"></i>
  <i class="fa-solid fa-lock fa-shake"></i>
  <i class="fa-solid fa-stopwatch fa-shake"></i>
  <i class="fa-solid fa-bomb fa-shake"></i>
</div>

Spin(スピン)

Spinはアイコンを時計回り、または反時計周りに回転させる効果になります。

クラス説明
fa-spinアイコンを360度時計回りに回転させます
fa-spin-pulseアイコンを8段階で360度時計回りに回転させます
1段階(1ステップ)で35度ずつ回転します
fa-spin-reverseアイコンを360度反時計回りに回転させます
<div class="fa-3x">
  <i class="fa-solid fa-sync fa-spin"></i>
  <i class="fa-solid fa-circle-notch fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin fa-spin-reverse"></i>
  <i class="fa-solid fa-spinner fa-spin-pulse"></i>
  <i class="fa-solid fa-spinner fa-spin-pulse fa-spin-reverse"></i>
</div>

その他カスタマイズユティリティ

最後にすべてのアニメーションに適用できるCSSプロパティ(ユティリティ)を紹介しておきます。

ユティリティ説明
–fa-animation-delay効果開始までの時間を指定
秒の場合には単位の「s」を付けてください
ミリ秒の場合は単位の「ms」を付けてください
指定方法はこちらを参照してください
–fa-animation-direction効果の適用方角を指定できます。
「reverse」を指定すれば逆回転になります。
指定方法はこちらを参照してください
–fa-animation-duration効果の適用時間を指定できます。
秒の場合には単位の「s」を付けてください
ミリ秒の場合は単位の「ms」を付けてください
指定方法はこちらを参照してください
–fa-animation-iteration-count効果の繰り返し回数を指定できます。
指定方法はこちらを参照してください
–fa-animation-timing効果の進行方法を指定できます。
指定方法はこちらを参照してください
<div class="fa-3x">
  <i class="fa-solid fa-cog fa-spin"></i>
  <i class="fa-solid fa-cog fa-spin" style="--fa-animation-delay: 3000ms" ></i>
  <i class="fa-solid fa-cog fa-spin" style="--fa-animation-direction: reverse;" ></i>
  <i class="fa-solid fa-cog fa-spin" style="--fa-animation-duration: 15s;"></i>
  <i class="fa-solid fa-compact-disc fa-spin" style="--fa-animation-duration: 30s; --fa-animation-iteration-count: 1;"></i>
  <i class="fa-solid fa-registered fa-spin" style="--fa-animation-duration: 3s; --fa-animation-iteration-count: 5;--fa-animation-timing: ease-in-out;"></i>
</div>

ボーダーと右/左寄せ

引用やアイコンボタンのようにFont Awesomeを利用する場合のクラスとなります。

クラス説明
fa-borderアイコンに枠線を付けられます
fa-pull-left左サイドにアイコンを固定させられます
fa-pull-right右サイドにアイコンを固定させられます

borderとpullと同時に利用する効果のユティリティは以下の通りです

–fa-border-color枠線の色を指定できます
–fa-border-padding枠線のパディングを指定できます
–fa-border-radius枠線の半径を指定できます
指定方法はこちらを参照してください
-fa-border-style枠線のスタイルを指定できます
–fa-border-width枠線の幅を指定できます
–fa-pull-margin左寄せ、または、右寄せのクラスにしてできるマージンを指定できます
ここは引用文になります
詳しくは右に移動してください…

<div>
   <i class="fa-solid fa-quote-left fa-2x"></i>
   ここは引用文になります
   <i class="fa-solid fa-quote-right fa-2x"></i>

</div>

<div>
   <i class="fa-solid fa-arrow-right fa-2x fa-pull-right fa-border"></i>
   詳しくは右に移動してください...
</div>

アイコンを重ねる

複数のアイコンを重ねることもできます。

まず、以下のようなクラスが用意されています。

クラス説明
fa-stack重ねるアイコンの親オブジェクトに指定するクラス
fa-stack-1x重ねるアイコンのサイズを1倍にできます
fa-stack-2x重ねるアイコンのサイズを2倍にできます
fa-inverse重ねるアイコンの色の領域(塗りつぶされた領域とそうでない領域)を反転させます

同時に利用するユティリティは以下の通りです

ユティリティ説明
–fa-stack-z-index重ねるアイコンのz-indexを指定できます
–fa-inverse反転させた場合の塗りつぶし領域に色を指定できます

サンプル

まず、以下のカメラアイコンと

以下の禁止アイコンがあります。

これを重ね合わせ、禁止アイコンの色を赤色にすると、以下のような「写真撮影禁止」のようなアイコンをつくることができます。


  <span class="fa-stack fa-2x">
    <i class="fa-solid fa-camera fa-stack-1x"></i>
    <i class="fa-solid fa-ban fa-stack-2x" style="color:Tomato"></i>
  </span>

その他、以下のようなサンプルも紹介しておきます。


  <span class="fa-stack fa-2x">
    <i class="fa-solid fa-circle fa-stack-2x"></i>
    <i class="fa-solid fa-flag fa-stack-1x fa-inverse"></i>
  </span>
  <span class="fa-stack fa-2x">
    <i class="fab fa-twitter fa-stack-1x fa-inverse" style="--fa-stack-z-index: 2;"></i>
    <i class="fa-solid fa-square fa-stack-2x" style="--fa-stack-z-index: 1;"></i>
  </span>
  <span class="fa-stack fa-2x" style="--fa-inverse: #1da1f2;">
    <i class="fa-solid fa-square fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
  </span>

ご参考

関連ページ