無料で使えるFont Awesome アイコンの基本的な使いかた｜WordPress

Font Awesomeアイコンはデザインセンスがとっても良く、世界中で愛されているアイコンです。

FontAwesome が 6にバージョンアップしましたのでこれを機に記事を見やすく再編集することにしました。

Webサイトのいろいろなシーンで使用されている Font Awesome (フォントオーサム) のアイコンを実際にどのように使用していくのかをまとめてみました。

Contents - 目次 -

Font Awesome – 基本的な使いかた

Font Awesome アイコン一覧から使用したいアイコンを選びます。

検索Boxの右にバージョンが表示されています。

WordPressや使用しているテーマによってバージョン6に対応していない場合があり、
その場合設定変更も必要になります。

詳しくは【以前のバージョンとのHTMLコードの違い】の章で。
FontAwesomeの icon 画面からアイコンを検索し Webサイト上で使用する基本の手順です。

アイコンの検索はカテゴリを絞り込んでいくと探しやすいです。

カテゴリ名では分かりづらいグループも新しい FontAwesomeの画面では
カテゴリ名の横に代表的なアイコンが表示されているのでイメージしやすいですね。

気に入ったアイコンが見つかったら画像をクリックします。
今回は ANIMALS（動物）のカテゴリから feather を選択してみました。

アイコンのスタイルは Solid / Regular / Light / Thin / Duotone の５つに分かれています。

デザイン性の高い Light / Thin / Duotone は Pro仕様で有料プランで使用できるスタイルです。

Regular は一部使用できるものもありますが無料で利用できるのは基本 Solid のみになります。

例えばこのベルのアイコンなど黒塗り Solid / 白抜き（Regular）両方が
FREEでの検索画面に表示されるものは使用できるといった感じです。

使用する箇所によってコピーするコードが変わります。

画面右にある 英数字が CSSカスタマイズで使用するユニコード
下の HTML と書かれた下にあるコードが投稿画面で使用する HTMLコード になります。

それぞれコードにカーソルを合わせクリックするだけでコピーすることができます。

Unicode / 英数字
この feather のユニコードは f52d 、 CSSカスタマイズに用いるコードで見出し、サイドバーのタイトル、
リスト表示にマークを付けるなど外観カスタマイズする時などに使用するコードになります。

HTMLコード
投稿記事内でアイコンを使用する際に テキストエディタ画面から記述します。

以前のバージョンの場合、Solid / Regular などのスタイルの区別は
fas や far といったコードを使用して指定していましたがこのバージョン6では
fa-Solid / fa-Regular とそのまま分かりやすい表示に変更されました。

feather のコード比較

バージョン5 <i class="fas fa-feather"></i>
バージョン6 <i class="fa-solid fa-feather"></i>

このほか、ユニコードの英数字も一部変更されている場合があります。
バージョンを変更することで表示されていたアイコンが消えてしまわないように気を付けてください。

Posted by 45