レンタルサーバーに関するサイト 
WordPress ではサイドバーなどに ウィジェットを作成することができます。
ウィジェット内の各項目の先頭にアイコンを表示する方法はいろいろあると思いますが、本ページでは Font Awesome 5 を使った方法をご紹介します。
Font Awesome とは？
基本的な使い方としては、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 の導入手順については、以下のページを参考にしてください。
::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 になるでしょう。 |
font-weight |
使用するスタイルを数値で指定します。
|
(6) アイコンが表示されるかチェックする
アイコンが表示されるかチェックします。
参考
おわりに
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用 おすすめレンタルサーバー
