見出しやメニューなどの文字の横にアイコンを追加する方法

4536では見出しやメニューなどの文字の横にアイコンを追加することができます。

現時点で使えるアイコンの種類は以下の2つ。

  1. Font Awesome
  2. IcoMoon

どちらも「アイコンフォント」と呼ばれるものです。

今回はそのアイコンフォントの一つ「Font Awesome」のアイコンをメニュー横に表示する方法をご紹介します。

  • サイドバーのタイトル
  • 本文中の見出し
  • ウィジェットの中のカテゴリ一覧

などにも同じようなやり方でアイコンを表示できるので、ぜひお試しいただければと思います。

メニューにクラス名を追加

(※この作業はメニューへのアイコン追加以外では必要ありません)

スマホ用、PC用、どちらのメニューでもいいですが、各項目に任意のクラス名を追加します。

メニューにCSSクラス名を追加

その後、「メニューを保存」をクリックして次の作業に進みます。

クラス名が追加できない場合

画面最上部の「表示オプション」の中にある「CSSクラス」にチェックを入れると入力欄が表示されます。

CSSの追加

アイコンを表示するには、

  1. 親テーマのスタイルシート(外観→テーマの編集)
  2. 子テーマのスタイルシート(外観→テーマの編集)
  3. 追加CSS(外観→カスタマイズ)

のいずれかに以下のようなコードを記述します。

.icon .manual a:before {
 font-family: "FontAwesome";
 padding-right:5px;
}
.icon .manual a:before{
 content: "\f02d"; 
}

このコードの中で適宜修正する箇所は「manual」と「f02d」の2点。

manualの部分は先ほど追加したクラス名になるので、例えば、「download」というクラス名にした場合は、「icon」の部分をすべて「download」にすればOKです。

もう1つの修正箇所である「f02d」はアイコンを指定する名前になり、Font Awesomeの公式サイトを見れば簡単にわかります。

アイコンの名前を調べる手順

こちらのページにアクセスし、追加したいアイコンを決めます。

そのアイコンの隣に記載されている英数字の中にある「fから始まる文字列」、これがアイコンの名前になります。

Font Awesomeのコード

サンプルコード

では、修正後のコードを確認してみましょう。

「manual」の部分が

.icon .download a:before {
 font-family: "FontAwesome";
 padding-right:5px;
}
.icon .download a:before {
 content: "\f0ed"; 
}
  • 「manual」の部分が「download」に(CSSクラス名)
  • 「f02d」の部分が「f0ed」に(アイコンの名前)

それぞれ修正されていることがわかると思います。

アイコンを文字の右に表示する

先ほどのコードだとアイコンが文字の左に表示されますが、

  1. 「before」の部分を「after」に
  2. 「right」の部分を「left」に

それぞれ変更すれば文字の右に表示されます。

他の文字の横にもアイコンを追加する

他の文字にも同じようにアイコンを追加できます。

クラス名

メニューの場合は任意のクラス名を付けましたが、それ以外はすべて指定されています。

  • 本文中の見出し2→「post h2」
  • 本文中の見出し3→「post h3」
  • 本文中の見出し4→「post h4」
  • サイドバーのタイトル→「sidebar-title」

いずれも「manual」の部分とそっくり入れ替えればOKです。

他にもたくさんあるので、わからない部分があればフォーラムにてご質問いただければと思います。

アイコンの名前

アイコンの名前は先ほどと同じようにFont Awesomeのページで調べて変更すればOKです。

カテゴリー4536マニュアル

5/31までドメイン無料!10日間の無料お試しもあり!

ドメインの取得は定番のお名前ドットコムで

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WordPressテーマ「4536」の開発者で同名公式サイトの運営者。