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

(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要素先頭にアイコンを表示するための記述を追加します。

以下はその一例です。

.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;
}

(6) アイコンが表示されるかチェックする

アイコンが表示されるかチェックします。

参考

• How to Use | Web Fonts with CSS

おわりに

CSSの疑似要素を使うやり方は、基本的には Webフォントを使うことが前提となり、Font Awesome では以前のバージョンの頃は割とよくやる手法でした。

ところが、Font Awesome がバージョン5 になり、「Web Fonts with CSS」フレームワークではなく「SVG with JS」がメインになったため、CSSの疑似要素を使うテクニックが使いにくくなってしまいました。

ただ、「Web Fonts with CSS」は「SVG with JS」に比べてそれ程大きなデメリットもないため、CSSの疑似要素を使いたいのであればあまり躊躇せず「Web Fonts with CSS」を使えばよいと思います。

WordPress用 おすすめレンタルサーバー