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】投稿編集画面で画像(メディア)を追加する際に挿入されるURLを相対URLにする

WordPress の投稿編集画面で、「メディアを追加」ボタンを使って画像(メディア)を追加する際、挿入されるHTMLコードのURL部分は 絶対URL になります。 しかし、これだと不便なので「相対U …

CodePen で書いたコードを自分のWebサイトに埋め込む方法

CodePen とは、Web上で HTML, CSS, JavaScript を書いてすぐに結果を表示することができるサービスです。 結果を確認しながら、コードを書いたり修正できるので、ちょっとしたW …

Windows で、.htaccess(先頭がドットで始まり拡張子を持たないファイル名の)ファイルを作成する方法

レンタルサーバーでは、.htaccess ファイルを使ってサーバー側の設定を変更することが許されているものが多くあります。 そこで、この機能を利用しようと思い Windows のエクスプローラー上で …

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

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

no image

レンタルサーバーに関して気を付けること

レンタルサーバーに関して気を付けること 借りたサーバのホスト名もしくは IPアドレスを参照する DNS のレコードを残したまま解約してはいけない。 ドメインに関して気を付けること 証明書の期限を短くす …

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