4536では見出しやメニューなどの文字の横にアイコンを追加することができます。
現時点で使えるアイコンは以下の通り。
- Font Awesome
IcoMoon（廃止）
どちらも「アイコンフォント」と呼ばれるものです。
今回はその「Font Awesome」のアイコンをメニュー横に表示する方法を2通りご紹介します。
最初に紹介する方法が簡単なので基本的にはそちらの方法で表示していただければと思いますが、2つ目の方法は少しコードを変えるだけで「サイドバーのタイトル」や「本文中の見出し」などにも表示できるので、使い分けてみてください。
【方法1】ラベルにコードを追加する
FontAwesomeのサイトで好きなアイコンを選びます。
HTMLコードをコピーします。
「ナビゲーションラベル」の文字の横にコピーしたコードを貼り付けます。
完成です！
【方法2】CSSで表示する
こちらの方法も基本的にコピペで進めることができますが、方法1よりも若干複雑です。
メニューにクラス名を追加
（※この作業はメニューへのアイコン追加以外では必要ありません）
スマホ用、PC用、どちらのメニューでもいいですが、各項目に任意のクラス名を追加します。
その後、「メニューを保存」をクリックして次の作業に進みます。
クラス名が追加できない場合
画面最上部の「表示オプション」の中にある「CSSクラス」にチェックを入れると入力欄が表示されます。
CSSの追加
アイコンを表示するには、
- 親テーマのスタイルシート（外観→テーマの編集）
- 子テーマのスタイルシート（外観→テーマの編集）
- 追加CSS（外観→カスタマイズ）
のいずれかに以下のようなコードを記述します。
.icon .manual a:before {
font-family: "Font Awesome 5 Free";
padding-right:5px;
font-weight: 900;
}
.icon .manual a:before{
content: "\f02d";
}このコードの中で適宜修正する箇所は「manual」と「f02d」の2点。
manualの部分は先ほど追加したクラス名になるので、例えば、「download」というクラス名にした場合は、「icon」の部分をすべて「download」にすればOKです。
もう1つの修正箇所である「f02d」はアイコンを指定する名前になり、Font Awesomeの公式サイトを見れば簡単にわかります。
アイコンの名前を調べる手順
こちらのページにアクセスし、追加したいアイコンを決めます。
そのアイコンの隣に記載されている英数字の中にある「fから始まる文字列」、これがアイコンの名前になります。
サンプルコード
では、修正後のコードを確認してみましょう。
「manual」の部分が
.icon .download a:before {
font-family: "Font Awesome 5 Free";
padding-right:5px;
font-weight: 900;
}
.icon .download a:before {
content: "\f019";
}- 「manual」の部分が「download」に（CSSクラス名）
- 「f02d」の部分が「f0ed」に（アイコンの名前）
それぞれ修正されていることがわかると思います。
アイコンを文字の右に表示する
先ほどのコードだとアイコンが文字の左に表示されますが、
- 「before」の部分を「after」に
- 「right」の部分を「left」に
それぞれ変更すれば文字の右に表示されます。
他の文字の横にもアイコンを追加する
他の文字にも同じようにアイコンを追加できます。
クラス名
メニューの場合は任意のクラス名を付けましたが、それ以外はすべて指定されています。
- 本文中の見出し2→「post h2」
- 本文中の見出し3→「post h3」
- 本文中の見出し4→「post h4」
- サイドバーのタイトル→「sidebar-title」
いずれも「manual」の部分とそっくり入れ替えればOKです。
他にもたくさんあるので、わからない部分があればフォーラムにてご質問いただければと思います。
アイコンの名前
アイコンの名前は先ほどと同じようにFont Awesomeのページで調べて変更すればOKです。
