WordPressテーマのmicataには最初からアイコンが豊富に用意されていますが、使い込んでいくうちに別のアイコンにしたくなることがあると思います。

そのようなときに便利なのがFontAwesomeというアイコンフォント。micataには最初からFontAwesomeが読み込まれているので、今回はこのFontAwesomeを使って、サイドバーのリスト型ウィジェットのアイコンを別のアイコンに変更する方法を紹介したいと思います。

カスタマイズ前

↓ サイドバーのアーカイブウィジェット（画像のアイコン）

カスタマイズ後

↓ FontAwesomeのアイコンに変更（フォントに変更）

↓ 二重の不等号アイコンに変更

1. style.css を編集

以下のコードをmicata子テーマの style.css ファイルに追加します。

#side aside ul li ul li {
    background: none;
}
#side aside ul li ul li:before {
    content: "f105"; /*アイコンのコード*/
    font-family: FontAwesome;
    color: #333; /*アイコンの色*/
    margin-right: 10px; /*アイコンとタイトルの余白*/
}

保存・更新すると、画像だったアイコンがFontAwesomeのアイコンになりました。

2. お好みのアイコンに変更するには

お好みのアイコンフォントにするには、FontAwesome公式サイトにあるチートシートを使うと便利です。

https://fortawesome.github.io/Font-Awesome/cheatsheet/

上のページからお好みのアイコンを選んで、使いたいアイコンの f○○○ 部分を先ほどのコードに置き換えれば大丈夫です。

例えばfa-angle-double-rightという二重の不等号アイコンは、アイコンのコードがf101なので、これを使う場合のコードは下のようになります。

↓ アイコン部分

#side aside ul li ul li:before {
    content: "f101"; /*アイコンのコード*/
}

追加するコード全体 ↓

#side aside ul li ul li {
    background: none;
}
#side aside ul li ul li:before {
    content: "f101"; /*アイコンのコード*/
    font-family: FontAwesome;
    color: #333; /*アイコンの色*/
    margin-right: 10px; /*アイコンとタイトルの余白*/
}

↓ コード追加後

3. アイコンの色を変更する場合

先ほど追加したアイコンの色を変更するには、通常の文字と同じように指定すれば良いので、下のようなコードになります。

#side aside ul li ul li:before {
    color: #000; /*アイコンの色*/
}

4. アイコンの大きさを変更する場合

アイコンの大きさも、通常の文字と同じ方法で変更できます。

#side aside ul li ul li:before {
    font-size: 16px; /*アイコンの大きさ*/
}

5. アイコンとリンクの距離を広げる（狭める）場合

アイコンと、タイトルなどのリンクとの距離はmarginで調整しているので、例えばmarginを14pxにする場合には下のようなコードになります。

#side aside ul li ul li:before {
    margin-right: 14px; /*アイコンとタイトルの余白*/
}

micataサイトの記事一覧に続きを読むリンク＋アイコンを追加する方法