WordPressCocoon

WordPressテーマ CocoonでのFont Awesome 5設定について

アイキャッチ画像 Font Awesome
この記事は約5分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

そのWordPressテーマ Cocoonのバーション2.0からFont Awesome 5に対応しています。

そこでこれまでFont Awesome 4を使ってきたMASAa.netですが、今回Font Awesome 5に切り替えることにしました。

WordPressテーマ CocoonでのFont Awesome 5設定について

Font Awesome 5の切り替えは、

  1. 「Cocoon 設定」を選択してCocoon設定画面に移動します。
  2. Cocoon設定画面の「全体」タブを選択します。
  3. サイトアイコンフォントの項目から「Font Awesome 5」を選びます。
  4. 最後に「変更をまとめて保存」をクリックして完了です。

の手順となります。

WordPressテーマ CocoonでのFont Awesome 5設定について

これで「Font Awesome 5」を使用することができるようになります。

但し、この状態ではこれまで「Font Awesome 4」が表示されていた一部のアイコンが、「□(四角)」で表示されていると思われます。

「□(四角)」で表示されている部分は、style.css内で指定したアイコンです。

次にこれまで「Font Awesome 4」を使ってきたCSSのソースを修正していきます。

CSSのソース(style.css)を修正する

自分の場合、style.css内で「Font Awesome 4」のアイコンを指定している箇所は5箇所となります。

  • 目次
  • ウィジェット カテゴリーの親カテゴリーと子カテゴリーの2箇所
  • アイキャッチ下の掲載日と更新日の2箇所

それぞれのstyle.css内の箇所を下記の様に変更しました。

目次アイコン

.toc-title::before {
  font-family: "Font Awesome 5 Free";
  content: '\f0cb'; /*目次タイトルのアイコン指定*/
  margin-right: 0.3em;
  font-size: 18px; /*フォントサイズ*/
  font-weight: 900; /*アイコンの太さ*/
  font-style: normal; /*通常フォント*/
}

ウィジェット カテゴリーの親カテゴリーアイコン

.widget_categories ul li a::before{ /*親カテゴリーのアイコン設定*/
  font-family: "Font Awesome 5 Free";
  content: "\f65d";
  color: #fe619a;
  padding-right: 6px; /*アイコン右側空間*/
  font-size: 18px; /*フォントサイズ*/
  font-weight: 900; /*アイコンの太さ*/
}

ウィジェット カテゴリーの子カテゴリーアイコン

.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
  font-family: "Font Awesome 5 Free";
  content: "\f65e";
  color: #fe619a;
  padding: 0px 6px 0px 2px; /*アイコン右側空間*/
  font-size: 18px; /*フォントサイズ*/
  font-weight: 900; /*アイコンの太さ*/
}

アイキャッチ下の掲載日アイコン

.post-date::before{ /*アイコンの変更*/
  font-family: "Font Awesome 5 Free";
  content: "\f093"; /*fa-uploadアイコン*/
  padding-right: 4px; /*右余白*/
  font-weight: 900; /*アイコンの太さ*/
}

アイキャッチ下の更新日アイコン

.post-update::before{ /*アイコンの変更*/
  font-family: "Font Awesome 5 Free";
  content: "\f044"; /*fa-editアイコン*/
  padding-right: 4px; /*右余白*/
  font-weight: 900; /*アイコンの太さ*/
}

Font Awesome 5の修正のポイント

「Font Awesome 5」の修正のポイントは2つあります。

1つ目は、font-familyの指定は「Font Awesome 5 Free」とします。

font-family: "Font Awesome 5 Free";

2つ目は、font-weightの指定を必ず行う必要があります。

font-weightの指定の値は「400」または「900」のどちらかになります。

これは「Font Awesome 5 Free」のアイコンによって変わってきます。

「Font Awesome 5 Free」のアイコンが「Regular Style」の場合は「400」を指定します。

WordPressテーマ CocoonでのFont Awesome 5設定について

「Font Awesome 5 Free」のアイコンが「Solid Style」の場合は「900」を指定します。

WordPressテーマ CocoonでのFont Awesome 5設定について

アイコンは「Font Awesome 5」のウェブサイトから選ぶことができます。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

最後に

これでWordPressテーマ CocoonでFont Awesome 5を使う事ができるようになりました。

しかも、WordPressテーマ Cocoonの設定を「Font Awesome 5」に指定するだけの簡単設定でFont Awesome 5を使う事ができるのは素晴らしいです。

やはりWordPressテーマ Cocoonは、最強のWordPressテーマだと思います。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ブラック・サージナイト
リネージュ2M
商人放浪‪記
ドラゴンとガールズ交響曲
エグゾスヒーローズ
魔剣伝説
ロードモバイル
パズにゃん

おすすめWordPressテーマ!
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ WING(AFFINGER5)
WordPressテーマ Diver

MASAa.net

コメント