【Cocoon】Font Awesomeを使って可愛いアイコンをメニューに入れる手順

最近ナビゲーションバーやサイドバーに

可愛いアイコンが入ったサイトを見かけるようになりました。

 

当サイトでも使っています♪

 

font-awesome

 

これはWebアイコンフォントといって、

Cocoonでは「Font Awesome」という

Webアイコンフォントが標準装備されています!

 

「Font Awesome」を使って

サイトをおしゃれにカスタマイズしてみましょう٩( ‘ω’ )و

 

簡単!Font Awesomeでアイコンを入れてみよう

 

font_awesome-logo

 

はじめに1点、注意事項があります。

 

Cocoonに使用する「Font Awesome」は

旧バージョンの4.7.0を使用します。

 

また、Cocoonは

「Font Awesome」を標準装備しているので、

データをダウンロードする必要はありません。

 

めっちゃ便利!^^

 

英語入力で使いたいフォントを検索!

 

Font Awesome(Ver.4.7.0)を開いて

使いたいフォントアイコンを選びます。

 

font awesome 設定

 

ページは勝手に翻訳されますが、

フォントアイコンの検索は

英語を入れないと反映されません(^_^;)

 

でもシンプルな英単語で検索できますし、

アイコンのカテゴリ一覧からも探せますので

ご安心ください。

 

では、試しに「ホーム」のアイコンを探してみましょう。

 

font awesome設定

 

検索窓に「home」といれると

「自宅」というカテゴリーがあるので、

その中から好きなアイコンを選びます。

 

font awesome設定

 

下の方にある

 

<i class="fa fa-home"></i>

 

というコードをコピーします。

 

aria-hidden="true" というコードはなくて大丈夫です。

 

アイコンの大きさは

以下のように調整します。

 

FontAwesomeアイコン大きさ

©https://fontawesome.com/v4.7.0

 

(fa-lg)

<i class="fa fa-camera-retro fa-lg"></i>

 

(fa-2x)

<i class="fa fa-camera-retro fa-2x"></i>

 

(fa-3x)

<i class="fa fa-camera-retro fa-3x"></i>

 

(fa-4x)

<i class="fa fa-camera-retro fa-4x"></i>

 

(fa-5x)

<i class="fa fa-camera-retro fa-5x"></i>

 

コード中の、アイコン名の後に

fa-lg < fa-2x < fa-3x < fa-4x < fa-5x

のいずれかを足すだけでOK!

 

また、

アイコンと文字の隙間がほしいときは

fa-fw 」という文字を追加して調整してください。

 

以上を組み合わせて

当サイトに入れたコードがこちら↓

 

<i class="fa fa-home fa-fw fa-lg"></i>

 

Cocoon のナビゲーションバーには

アイコンの大きさは「 fa-lg 」がちょうど良かったです。

 

Cocoon のナビゲーションバーにアイコンを入れてみよう

 

Cocoonサイトの

ナビゲーションバー(メニュー)に

アイコンを入れてみましょう!

 

「外観」→「メニュー」をひらいて

 

cocoonメニュー

 

メニュー画面で「HOME」の

「ナビゲーションラベル」を編集します。

 

WPメニュー画面

 

先ほどコピーした

アイコンのコードを先頭に貼り付けます。

 

cocoon_FontAwesome設定

 

これで完了です!

コピペするだけって楽ちんでいいですね♪

 

FontAwesome設定

 

Font Awesome のおかげで

ナビゲーションバーがより目にとまるようになりました!

 

関連記事やコメント欄の見出しにも!

 

記事下の「関連記事」や「コメント」の見出し(デフォルト)

 

Cocoon関連見出しbefore

 

シンプルすぎて気になっていたので、

これも Font Awesome で可愛くしましょう!

 

ここからは子テーマを使いますが、

コピペするだけの簡単作業です(^^)

 

「外観」→「テーマの編集」をひらき、

右上の「編集するテーマを選択」で

「 Cocoon Child 」を選択後、

「スタイルシート( style.css )」をひらきます。

 

cocoon_child子テーマ

 

子テーマのスタイルシートを開いたら、

以下のコードをコピペするだけで↓

 

/************************************
** コメント見出しカスタム
************************************/

.comment-title::before {
font-family: "FontAwesome";
content: "\f086";
}

/************************************
** 関連記事見出しカスタム
************************************/

.related-entry-heading::before {
font-family: "FontAwesome";
content: "\f02e";
}

 

アイコン付きの見出しに早変わり(^o^)/

 

Cocoon関連記事見出しafter

 

Font Awesome を CSS で使用する際には、

 

content: " Unicode ユニコード (\f02e)";

 

と書くほうが簡単です。

 

ユニコードは

アイコンコードより上に小さく書かれています。

 

FontAwesome 設定

 

アイコンがついて可愛くなったのですが、

これでも物足りないと感じたので

CSSをいじって自分好みに整えてみました!

 

Cocoon関連記事見出しafter2

 

当サイトの

関連記事およびコメントの

見出しCSSのコード↓

 

/************************************
** コメント見出しカスタム
************************************/

.comment-title {
padding: 10px 20px;
border-left: 8px solid #f8b862;
margin-top: 50px;
}
.comment-title::before {
font-family: "FontAwesome";
content: "\f086";
}

/************************************
** 関連記事見出しカスタム
************************************/

.related-entry-heading {
padding: 10px 20px;
border-left: 8px solid #f8b862;
margin-top: 50px;
}
.related-entry-heading::before {
font-family: "FontAwesome";
content: "\f02e";
}

 

カスタマイズは以上です。

お疲れさまでした!

 

ぜひ Cocoon と Font Awesome を使って

自分のサイトを好みにカスタマイズしてみてください( ´ ▽ ` )ノ

 

コメント