WordPress のウィジェット内項目の先頭にアイコンを表示する方法（Font Awesome 5 を利用）

WordPress ではサイドバーなどにウィジェットを作成することができます。

ウィジェット内の各項目の先頭にアイコンを表示する方法はいろいろあると思いますが、本ページでは Font Awesome 5 を使った方法をご紹介します。

Font Awesome とは？

Font Awesome は、Webサイト上で簡単にアイコンを表示することができるツールです。

基本的な使い方としては、HTMLの中に「<i class="fas fa-camera-retro"></i>」といったタグを記述するだけで、「」← このようなアイコンを表示することができます。

最新版のバージョンは、5 となっています。

手順
おわりに

手順

(1) WordPress に Font Awesome 5 を導入する

Font Awesome 5 には、「SVG with JS」と「Web Fonts with CSS」という2つのフレームワークがあり、どちらか一方だけを導入して使用することになります。公式には、「SVG with JS」の使用が推奨されています。

しかし今回の場合、後者である「Web Fonts with CSS」の導入が前提となります。（「SVG with JS」ですと、すんなりとできませんので）

Font Awesome 5 の導入手順については、以下のページを参考にしてください。

WordPress に Font Awesome 5 を導入する方法

2018.03.30

Webサイトに Font Awesome 5 を導入する方法

2018.03.30

なぜ「Web Fonts with CSS」を使うのかというと、今回の手順の中で「CSS の疑似要素 (Pseudo-elements)」を使うからです（具体的には ::before を使います）。

How to Use | SVG with JS には、「SVG with JS」で疑似要素を使う方法が書いてあるのですが、推奨されていないようですしちょっと面倒そうでした。

(2) Widget CSS Classes をインストールする

「Widget CSS Classes」というWordPress のプラグインをインストールします。

Widget CSS Classes — WordPress Plugins

このプラグインをインストールすると、各ウィジェットに対して任意の CSSクラス名をセットすることができるようになります。

(3) ウィジェットにCSSクラス名をセットする

WordPress の管理ページ [外観] – [ウィジェット] から、目的のウィジェットを表示します。

ウィジェット内に「CSS Classes」という項目が追加されていますので、そこにクラス名を入力して保存します。

今回は、wp-widget-cat という名前にしました。（実際は、その Webサイトに固有の名前を含めるとよいと思います）

(4) 表示したいアイコンを探す

アイコンは、こちら → Icons | Font Awesome から探すことができます。

文字列を入力して検索することもできます。

これと決めたアイコンをクリックします。

このアイコンの場合、、のところで、「SOLID」と「REGULAR」という2つのスタイルを選択することができました。「LIGHT」は Pro版でないと使えないようです。アイコンによって無料(Free版)で使えるスタイルは異なります。

このアイコンを表す Unicode の番号です。

これらの情報は次で使用することになります。

(5) `style.css` に追記する

style.css に、このCSSクラス内の li要素先頭にアイコンを表示するための記述を追加します。

注意

ここでは、「li要素の先頭にアイコンを表示する」としましたが、お使いのテーマによっては、別の要素になる可能性もあります。
ウィジェット内の各項目がどのような要素（HTMLタグ）になっているか確認してください。

以下はその一例です。

.wp-widget-cat li:before {
  color: #DFB845;
  content: "\f07c";
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.5em;
  text-decoration: none;
}

主なプロパティ説明

content アイコンのUnicode番号をセットします。先頭にバックスラッシュが必要です。

font-family Free版をダウンロードして使っている場合は Font Awesome 5 Free、Pro版の場合は Font Awesome 5 Pro を指定します。
通常は、Font Awesome 5 Free になるでしょう。

主なプロパティ	説明
`content`	アイコンのUnicode番号をセットします。先頭にバックスラッシュが必要です。
`font-family`	Free版をダウンロードして使っている場合は `Font Awesome 5 Free`、Pro版の場合は `Font Awesome 5 Pro` を指定します。通常は、`Font Awesome 5 Free` になるでしょう。
`font-weight`	使用するスタイルを数値で指定します。 Solid → 900 Regular → 400 Light → 300 Brands → 400