Tips

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

投稿日:2018年3月30日 更新日:

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 になるでしょう。
font-weight 使用するスタイルを数値で指定します。

  • Solid → 900
  • Regular → 400
  • Light → 300
  • Brands → 400

(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用 おすすめレンタルサーバー

-Tips
-

執筆者:fitallright

関連記事

WordPress のウィジェットに、特定のカテゴリの「最近の投稿」を表示する方法

WordPress において、特定のカテゴリ内の「最近の投稿」をウィジェットに表示する方法をご紹介します。 目次WordPress のウィジェットとは?手順設定方法TitleFilterPost de …

レンタルサーバーにおけるデータ転送量とは?

レンタルサーバーの機能やスペックを見ていると「転送量の目安」といった項目を目にすることがあります。 ウェブサイトへのアクセスが少ないうちは、あまり気にする必要はない項目ではあるのですが、できれば、 レ …

エックスサーバーに WP-CLI を導入する

WordPress は優れた管理サイトが用意されているため、ほとんどの操作をここから行うことができます。 しかし、何らかの原因で管理サイトにアクセスができなくなった場合に備え、別の操作方法を用意してお …

エックスサーバーに Node.js をインストールする

エックスサーバーは、SSH を使ってターミナルエミュレータでログインすることができますが、そのままだと Node.js が使えません。つまり、node コマンド(npm, npx も)が使えません。 …

Wayback Machine にサイトを保存させない

robots.txt ファイルとは? にも書いたのですが、Wayback Machine というサイトがあります。 Wayback Machine Wayback Machine は、世界中のウェブサ …

ロリポップ!「スタンダードプラン」
さくらのレンタルサーバ「スタンダードプラン」