Font Awesome6を自在に使いこなせるようになりましょう。

Font Awesome 6は無料版と有料版とがあり、無料で使えるアイコンは種類が限られています。

KIT登録までは自動ですが、KITを使わずに実物をダウンロード利用する事もできます。css/all.cssとwebfonts/は必須です。

デザイン的な装飾や、アニメーション等の様々なカスタマイズコードが用意されています（Pro版限定のものあり）。

Font Awesomeをご紹介します。

本記事ではFont Awesomeの基本知識や使い方、そしてカスタマイズ例もご紹介します。

Font Awesomeは、WEBサイトにアイコンやマークを簡単に表示させる事ができるサービスですよね。

TwitterやFacebookなどのアイコン、矢印やメールのマークを付けたい場合に、Font Awesomeを使えば簡単に実現できます。

個人運営サイトでも利用可能

Font Awesomeは商用利用が可能なので、本サイト「えるぺぐ」の様に個人運営サイト・ブログでも導入ができます。

様々なカスタマイズが自在にできる様に仕組みづくりがされています。

Font Awesome 6を紹介

2022年1月現在、Font Awesome 6のベータ版が公開されています。

本記事では、最新バージョンである「Font Awesome 6」をベースにご紹介します。

Font Awesome 6は無料で使える「Free」プランと、有料の「Pro」プランが用意されています。

無料プランと有料プランの違い

無料版と有料版の一番の違いは、やはり「利用できるアイコンの数」でしょう。

無料プランでは利用できるアイコンが約2,000種類なのに対し、有料プランは約16,000種類となっています。

個人のWEBサイトなど規模が小さければ無料プランでも問題なく利用する事ができると思います。

ただ本格的にアイコンを活用したいという方は有料プランをおすすめします。

料金は年額99ドルで、1ヶ月に換算して1,100円程度です。

アカウント登録をして利用

最新バージョンのFont Awesome 6では、まずアカウント登録をするところから始まります。

アカウント登録

Font Awesome公式ページにアクセスして、自分のアカウントを作成しましょう。

TOPページすぐ下にある「Start for Free」をクリックします。

次の画面でメールアドレスを入力して「Send Kit Code」のボタンを押しましょう。

「Confirm Your Font Awesome Account Email Address」という件名でメールが届きます。

中に表示された「Confirm Your Email Address」のボタンを押して認証を行ってください。

次の画面でパスワードを上と下に2つ入れれば、アカウント作成は完了です。

プロジェクト（KIT）の登録

Font Awesomeのアカウント登録が完了したら、次はプロジェクト（KIT）の登録が必要です。

まずはFont Awesomeへ先程の情報でログインをします。

新規KITプロジェクトの登録

最初はランダムな記号数字がKIT名として入っていますが、変更する事ができます。

FreeとProは今回無料版を使うので、Freeの方を選びましょう。

その下は「Webfont」の方を選択します。

表示させる対象のドメイン名も登録する事ができます。

登録KIT専用のCDNコード

KITを登録する事で、上記のCDNコードが生成されます。

CDNは、Content Delivery Network（コンテンツデリバリーネットワーク）の略ですね。

上記のjavascriptのCDNコードを読み込むことで、Freeアイコンの利用許可・管理がされる様になっています。

登録されたKIT専用のJavascriptコード例

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

headタグ内に上記のCDN読込コードを記載すればOKです。

Kitの利用は無料で使えるアクセス数に上限（月10,000pv）があります。

ファイルダウンロード・アップロードで利用

次にファイルを一式WEBサーバーにホストして、Font Awesomeを利用するパターンの紹介です。

アカウント登録・KIT登録後にダウンロードできるようになります。

KITのコードを登録しても、Font Awesomeを使うWEBサイト上でCDN読込させなければ、カウントはされません。

生成されたKITのコードは使わないまま、実物ファイルをサーバーにホストする流れです。

ファイル一式をダウンロード

アカウントにログインした状態で、TOPページから「Download」ボタンをクリックしましょう。

左側に「6.1.2 For The Web」という項目があります。

「Free For Web」のボタンを押してダウンロードします。

Font Awesomeの全てのフレームワークをWEBサーバーにホストするために必要なデータが、この中に全て入っています。

必要ファイルの確認・アップロード

Font Awesomeに必要なのは「CSSファイル1枚」と「webfontディレクトリ」です。

この時、all.cssが入ったcssディレクトリと同位置に、webfontディレクトリも並べます。

そのファイルをWEBサーバーの指定ディレクトリ内にUPしておきます。

all.cssの入ったCSSとwebfontを同位置に設置する事

コード読み込み

次にアップロードしたファイルパスを、headタグで読み込みます。

headタグ内コード記述

<link href="URL/ディレクトリ/css/all.css" rel="stylesheet">

「URLディレクトリ/」部分は自由なので、ご自分の環境に合わせて変更してくださいね。

読み込み記述こそありませんが、webfontsディレクトリも以下の位置にアップします。

Font Awesomeの使い方

では実際にFont Awesomeを使ってアイコンフォントを表示させてみましょう。

ソース上に直接表示

HTMLソース上に直接表示させる場合です。

iタグがアイコンフォントタグです。文字の前にアイコンをつけたい場合がほとんどでしょうから、テキストの前につけます。

この様にアイコン一覧のCSSとwebfontを丸ごと読み込んでおけば、アイコンの切り替えにも迅速に対応できます。

あとは表示させたいアイコンをfontawesomeサイトで見つけて、そのiタグコードを張り付けるだけです。

CSSを使って表示

Font Awesomeは、CSSに手書きして表示させることもできます。

その場合、webfontファイルを別途読み込んでおく必要があります。

HTML

<i class="facebook"></i> Facebook

CSS

CSSに直接Font Awesomeを書く場合、::before疑似要素を使います。

.facebook{ position: relative; } .facebook::before { position: absolute; top: 0; left: 0; content: '\f082'; font-family: "Font Awesome 6 Free"; font-wight: 400; }

上記のcontent:の欄にある「\f082」がアイコン指定のコード（unicode）ですね。

先程のFont Awesomeアイコン一覧で表示させたいアイコン右上にもunicodeが載っています。

unicodeの前に「\」マークをつけましょう。

Font Awesomeのアイコンが□になる場合

CSSに手書きで書いている場合、アイコンが表示されず□のマークになる事があります。

そんな時はコードを読み込んでいるかはもちろん、CSS部分もチェックをして下さい。

上記のfont-familyにある「Font Awesome 6 Free」の記述やfont-weightは忘れない様にしましょう。

font-weightはアイコンによって400や900の指定があります。

content:欄の「\」バックススラッシュも忘れない様にして下さい。

Font Awesomeのカスタマイズ

なんといってもFont Awesomeのアイコンフォントは、画質を維持したまま様々なカスタマイズができる点が魅力です。

中でもFont Awesome 6において特徴的な、カスタマイズ例をご紹介します。

サイズ変更

サイズの変更を行うには、クラスの設定を行います。

絶対的なサイズ変更

単にアイコンのサイズを増減する場合は、-1x系のクラスを追加する事になります。

これは今までのFont Awesome 5でも使われている通常のサイズ指定ですね。

相対的なサイズ変更

それ以外に相対的なサイズ変更で、周囲のテキストとのバランス余白や垂直方向が調整できる指定もできます。

相対的なサイズ変更は、最新のブラウザのデフォルトのフォントサイズ（16px）軸に作成されています。

そのサイズを中心に大きくなったり小さくなったりするようになっています。

ダブルトーンスタイル（Pro版のみ）

Font Awesome6では、複数の色やトーンを追加したり、2色の色合いを反転させしたりができます。

ダブルトーンは「fa-duotone」クラスを追加して従来アイコンを装飾します。

本来の色を1色目、その副次色を2色目として2色構成に彩られます。

この時2色目の色合いは1色目の40％の透明度具合になっています。

副次色の変更

だブルートンのデフォルトは、2色目が1色目の40％の不透明度に設定されています。

以下の様に直接styleクラスによるCSSカスタムプロパティを明示する事で、1色目或いは2色目レイヤーの不透明度を自在に設定できます。

1色目

2色目

自在にカラーリング可能

ダブルトーンは普通に設定すれば、その時設定されているサイズや色を自動的に継承します。

しかし自由に色は変える事ができます。

--fa-primary-color:と--fa-secondary-color:は併用できるので、ベースカラーにとらわれない様々なカラーリングができます。

それこそイラストの様なアイコン演出が可能です。

アニメーション効果

ビート効果

fa-beatクラスを追加すれば、アイコンをアニメーションで拡大または縮小させる事ができます。

注目を集めたり、健康・心臓中心のアイコンで使用したりするのに役立ちます。

フェード効果

fa-fadeクラスを追加すれば、アイコンをフェードイン・フェードアウトさせる事ができます。

バウンド効果

fa-bounceクラスを追加すれば、アイコンを上下にバウンドさせる事ができます。

3D回転効果

fa-flipクラスを追加すると、 3D空間でアイコンを回転させる事ができます。

デフォルトでは、アイコンをY軸を中心に180度回転します。

2D回転効果

fa-spinクラスを追加するとアイコンが2Dで回転します。8段階で回転させるバリエーションがあります。

振る

fa-shakeクラスを追加すると、アイコンを前後に振ることができます。

アイコンを重ねる

Font Awesomeのアイコンの上に、別のFont Awesomeアイコンを重ねる事もできます。

2つを重ねる事で、通常にはないオリジナルアイコンを生み出す事ができますね。

重ねたい2つのアイコンをご準備しましょう。

重なりクラスの設定

<i class="far fa-heart"></i> <i class="far fa-bell"></i>

サンプル

親要素（span要素）に「fa-stack」クラスを追加します。

<span class="fa-stack"> <i class="far fa-heart"></i> <i class="far fa-bell"></i> </span>

サンプル

上記の様にfa-stackを入れただけでは、両者は重なりません。

それぞれのアイコンサイズを指定

では下になるアイコンに「fa-stack-2x」を、上に重ねるアイコンに「fa-stack-1x」を追加します。

<span class="fa-stack"> <i class="far fa-heart fa-stack-2x"></i> <i class="far fa-bell fa-stack-1x"></i> </span>

サンプル

上記の様に、下と上のアイコンに「サイズ指定が掛かった時」のみ重なるようになっています。

そのまま重ねてしまうと、サイズによっては見にくくなりますよね。

下の土台アイコンのサイズを小さくするか、上のアイコンのサイズを大きくして調整しましょう。

一押し人気コーナー紹介