<>

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

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

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

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

Font Awesome  – 基本的な使いかた

初期設定に関する記事はこちら↓
Font Awesome (フォントオーサム) |無料で使えるアイコンの登録と設定【 WordPress 】

FontAwesomeのバージョン

Font Awesome アイコン一覧 から使用したいアイコンを選びます。
Font-Awesome- アイコン検索画面 - バージョン確認

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

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

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

Search – Icons – アイコンの検索

Font-Awesome- アイコン検索画面 - キーワード検索イメージ

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

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

Font-Awesome- アイコン検索画面 - 希望のアイコンをクリック - イメージ画像 -feather -
気に入ったアイコンが見つかったら 画像をクリックします。
今回は ANIMALS(動物)のカテゴリから feather を選択してみました。

Icon – Style – 無料で使えるアイコンスタイル

アイコンとコードの画面 - ユニコードやHTMLコードをコピーする - イメージ画像 -feather -

アイコンのスタイルは  Solid / Regular / Light / Thin / Duotone の5つに分かれています。
アイコンスタイル( 線の太さなど )のイメージ画像

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

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

例えばこの ベルのアイコンなど 黒塗り Solid / 白抜き(Regular)両方が
FREEでの検索画面に表示されるものは使用できるといった感じです。
無料で利用できるアイコンスタイルの解説 - イメージ画像 -Bell -

Icon – Copy – コードをコピーする

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

コピーするコードの画像 - ユニコードとHTMLコード

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

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

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

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

以前のバージョンとの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>

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


続きはこちら! Font Awesome の使いかた – エディタ画面でサイズや色を指定