Font Awesome ウェブアイコンの基本的な使い方をまとめました。
基本的な使い方～Font Awesome ウェブアイコンを使う準備
Font Awesome ウェブアイコンを使う方法は、CDN (Contents Delivery Network) を利用する方法とsvg (Scalable Vector Graphics) をダウンロードして利用する方法の2通りあります。
CDN はダウンロードもインストールも不要で、1行のコードを書くだけでサイトにウェブアイコンを表示できます。
とてもカンタンなので、ここでは CDN を利用する方法について解説します。
Font Awesome Kit Code (CDNコード）を入手する
最初に、Font Awesome ウェブアイコンを使うための Kit Code （キット コード / CDN コード）を入手して、ウェブサイトの<head>～</head>内に記述しましょう。
Font Awesome Version 6 （最新版）のキット コード入手方法は、こちらの記事を参照してください。
なお、ご参考までに…
2021年8月8日にリリースされた Font Awesome 5 （最新バージョン 5.15.4）の CDNコードはこちら
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
使いたいアイコンを検索して、<i></i>コードを使いたい場所に挿入する
Font Awesome ウェブアイコンは、使いたいアイコンを検索して使いたい場所にコードを貼り付けるだけ。
例えば、下記の htmlコードを記述すると…
<p><i class="fas fa-map-marked-alt"></i>このアイコンは、map-marked-alt です。</p>">ウェブアイコンの後にスペースを挿入する
上の表示例を見て、Font Awesome アイコンとそれに続くテキストの間が狭すぎ！と感じませんか？
私は、ウェブアイコンとそれに続く文字列の間にスペースが入っている方が見やすいと思うので、ウェブアイコンの後ろに適宜スペースを入れるようにしています。
以下の手順で、アイコンの後ろに半角スペースや全角スペースを入れることができます。
半角スペースを入れる
ウェブアイコンの後ろ（</i>の直後）に、半角スペース（ ）を入れてみましょう。
<p><i class="fas fa-map-marked-alt"></i> このアイコンは、map-marked-alt です。</p>全角スペースを入れる
ウェブアイコンの後ろ（</i>の直後）に、全角スペーススペース（ ）を入れてみましょう。
<p><i class="fas fa-map-marked-alt"></i> このアイコンは、map-marked-alt です。</p>ウェブアイコンのサイズを変える
Font Awesome ウェブアイコンは、クラスを追記する、または .css でサイズを指定する方法でサイズを変更できます。
クラスを追記してサイズを変更する
Font Awesome のサイズクラスは、fa-lg（33%拡大）、fa-2x（2倍）、fa-3x（3倍）、fa-4x（4倍）、fa-5x（5倍）の5つです。
これらのタグを、<i class=” “>のアイコン名の後ろに追記するだけです。
それでは、サイズクラスの追記とブラウザ表示例を見ていきましょう。
<p><i class="fas fa-map-marked-alt"></i> サイズ指定なし</p>
<p><i class="fas fa-map-marked-alt fa-lg"></i> fa-lg</p>
<p><i class="fas fa-map-marked-alt fa-2x"></i> fa-2x</p>
<p><i class="fas fa-map-marked-alt fa-3x"></i> fa-3x</p>
<p><i class="fas fa-map-marked-alt fa-4x"></i> fa-4x</p>
<p><i class="fas fa-map-marked-alt fa-5x"></i> fa-5x</p>.cssを設定してサイズを自由に変える
5種類以外のサイズに変更するには、.css にクラスを設定します。
例えば、2.5倍、3.5倍の設定を試してみましょう。
2.5倍サイズのクラスを「.fa_middle」、3.5倍サイズのクラスを「.fa_larger」として設定してみました。
CSSの書き方
/*アイコンサイズ2.5倍*/
.fa_middle {
font-size: 2.5em;
}
/*アイコンサイズ3.5倍*/
.fa_larger {
font-size: 3.5em;
}HTMLの書き方
<p><i class="fas fa-map-marked-alt fa_middle"></i> 2.5倍</p>
<p><i class="fas fa-map-marked-alt fa_larger"></i> 3.5倍</p>ウェブアイコンの色を変える
ウェブアイコンの色は、<i class=” “>の中に「style=”color: カラーコード;”」を追記して変更できます。
また、サイト内で使用頻度が高い色がある場合は、.css で設定したクラスを<i class=” “>の中に指定してもよいです。
カラーコードを指定してウェブアイコンの色を変更する
ここでは、原色大辞典と併記されているカテゴリ別色一覧を参照していくつかのカラーをピックアップしてウェブアイコンの色を指定する方法を説明します。
参考のため、下の「ブラウザ表示」にはカラーコードと色名称を記載しましたが、その下の「HTMLの書き方」ではカラーコードと色名称の記述を省きますね。
HTMLの書き方
<i class="fas fa-map-marked-alt fa-fw" style="color: #ff7f7f;"></i>
<i class="fas fa-map-marked-alt fa-fw" style="color: #00bb85;"></i>
<i class="fas fa-map-marked-alt fa-fw" style="color: #fff3b8;"></i>
<i class="fas fa-map-marked-alt fa-fw" style="color: cornflowerblue;"></i>.css で設定した色をウェブアイコンに適用する
サイト内で使う頻度が高い色は、.css でクラスを設定しておくのが便利だと思います。
Font Awesome ウェブアイコンだけではなく、その他の要素の色指定もしやすくなりますから。
それでは、上のサンプルの と を .css でクラス設定して、ウェブアイコンの表示色を指定する方法を説明しましょう。
.css の書き方
/*色指定*/
.color_pink {
color: #ff7f7f
}
.color_green {
color: #00bb85
}HTML の書き方
<i class="fas fa-map-marked-alt color_pink"></i>
<i class="fas fa-map-marked-alt color_green"></i>ブラウザ表示
ウェブアイコンを等幅表示させる
<i class=” “>の中に fa-fx クラスを入れると、Font Awesome ウェブアイコンを等幅（固定幅）で表示できます。
fx は、fixed width の略語です。
fa-fx クラスは、幅の異なるアイコンの前後に適切な余白を設けてくれるのでアイコンが中央揃えで表示されます。
Font Awesome アイコンをリストの見出しに使う場合は、fa-fx クラスを追加すればきれいに整列できますよ。
fa-fw クラスを入れていない場合
fa-fw クラスを入れた場合
HTML の書き方（fa-fwを入れる）
<i class="fas fa-ellipsis-v fa-fw"></i> 縦3点リーダー
<i class="fas fa-ellipsis-h fa-fw"></i> 横3点リーダーul (unordered list / 順序の無いリスト）にウェブアイコンを使う
これはとても使い勝手が良いと思います。
ul のデフォルト マーカーは「●（中黒）」ですよね。
ul のクラスに fa-ul を、リスト項目に fa-li クラスを設定すれば、中黒の代わりに Font Awesome アイコンをカンタンに使うことができます。
例えば、こんな感じ。
HTMLの書き方
<ul class="fa-ul">
<li><i class="fa-li fas fa-utensils"></i> メニュー</li>
<li><i class="fa-li fas fa-birthday-cake"></i> 特別な日に</li>
<li><i class="fa-li fas fa-cocktail"></i> お飲み物</li>
<li><i class="fa-li fas fa-map-marked-alt"></i> 店舗情報</li>
</ul><ul>タグ に fa-ul クラスを記述し、その下の <li>タグで指定する Font Awesome アイコンの名称の前に fa-li クラスを記述するだけです。
上の例は、たまたま Font Awesome アイコンの幅が同じなので、等幅表示の fa-fw は入れていません。
お好みでカラーコードを指定しても面白いかもしれませんね。
ウェブアイコンの角度を変える・反転する
Font Awesome ウェブアイコンは、fa-rotate-* や fa-flip-* クラスを指定すればアイコンの表示角度を変えたり、アイコンを反転させて表示することができます。
rotate は回転、flip は反転です。
HTMLの書き方
<i class="fas fa-walking"></i> normal<br>
<i class="fas fa-walking fa-rotate-90"></i> fa-rotate-90<br>
<i class="fas fa-walking fa-rotate-180"></i> fa-rotate-180<br>
<i class="fas fa-walking fa-rotate-270"></i> fa-rotate-270<br>
<i class="fas fa-walking fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fas fa-walking fa-flip-vertical"></i> fa-flip-verticalFont Awesome ウェブアイコンが正しく表示されないときは？
Font Awesome アイコンの<i>～</i>タグを書いたのに、表示が□になってしまい、正しくアイコンが表示されない…。
実はこれ、よくあるケースです。
原因は、以下3つのいずれか。
- Free版（無料で使えるアイコン）を読み込むためのCDN（Kit Code）を<head>~</head>内に記述しているにもかかわらず、有料版アイコンを選択している場合
- <head>~</head>内に記述したCDN（Kit Code）とは異なるバージョンのFont Awesomeアイコンを選択している場合。
- CORS (Cross-Origin Resource Sharing / オリジン間リソース共有)ポリシーにより、フロントエンドの JavaScript コードがアクセスすることをブロックしている場合
いずれにせよ原因は明確なので、解決策をお知らせしますね。
FontAwesome V6. V5. を使っている場合
Font Awesome アイコン検索画面 を開きます。
フリー版のアイコンを検索するなら、上図の [Free] を選択しましょう。
必要に応じて [Classic] や [Sharp] も選択して絞り込んでみましょう。
なお、上図の [Brands] は画面右側のバージョン選択で [6.2.3] を選んだ時にだけ表示されます。
[5.15.4] を選ぶと、[Brands] は表示されなくなります。
Font Awesome V4.を使っている場合
Font Awesome 4 用の CDN（Kit Code）を<head>～</head>に記述していると、v5. や v.6 のアイコンが使えません。
Font Awesome 4 用の CDN（Kit Code）を採用している場合は、Font Awesome 4 のページ を開いて使えるアイコンを選択しましょう。
上図赤枠の中に検索ワードを入れてアイコンを抽出するか、ページ下方にスクロールして使いたいアイコンを探します。
CDN (Kit Code) もバージョンも正しいにも関わらず、アイコンが□になってしまう場合
CORS (Cross-Origin Resource Sharing / オリジン間リソース共有) 違反のためブラウザがアイコンを読み込んでくれないのが原因かもしれません。
この問題は、デベロッパーツールを使えばすぐに特定できます。
具体的な方法は、こちらの記事 を参照してください。
以上 FontAwesomeアイコンの使い方ヒントでした。
ご参考になれば幸いです♪