【Cocoonカスタム】アイコンフォントをすべてGoogle製アイコンに置き換える方法【コピペOK】【WordPress】

Cocoonカスタマイズ
この記事は約3分で読めます。

WordPress高性能無料テーマCocoonで、使用されているアイコンフォントをすべてGoogle製アイコンに置き換えるCSSを用意しましたので紹介できればと思います。
Cocoon V2.0以降に対応しています。

ここでは、デフォルトで使用可能なフリーアイコンフォント、FontAwesomeを、商用利用もOKなGoogle Material Iconsに差し替えたいと思います。

以前の記事でモバイルフッターメニューを部分的にMaterial Iconsに差し替えるという記事を上げました。

今回はそのコードを応用して、ブログ内のすべてのアイコンフォントをGoogle Material Iconsに変えていきたいと思います。

Font AwesomeとMaterial Iconsのデザイン的な違いについては、先程紹介した記事こちらの章で紹介しています。

sponsored

【コピペOK】CocoonのアイコンフォントをすべてGoogle製アイコンに置き換えるコード紹介

基本的には以前の記事のコードをベースにしていますので、すべての編集をCSSのみで完結できるようになっています。
CocoonのCSSクラス周りがバージョン2.0以降で変わっていますので、本TipsはCocoonバージョン2.0以降に対応しています。

早速ですが、最終的なコードは以下になります。
こちらを(小テーマを使っていれば子テーマの)style.cssの最後もしくはメディアクエリーごとに貼り付れば動作するかと思います。

sponsored

コードの解説

ざっくりとコードを解説していきます。

まずはじめにマテリアルアイコンフォントを読み込んでいます。今回は、アウトラインとフィルの両方を読み込んでおきます。

次に、フォントアイコン表示用に共通で「.fa」というクラスが設定されていますので、そこにMaterial Iconsを適用します。

後は地道に個別のアイコンに対してMaterial Iconsを当て直しています。

オリジナルのCocoonの設定方法が、疑似要素「:befiore」アイコンを挿入している形なので、style.cssでマテリアルアイコンのアイコン名を上書きしています。

Material Iconsは単語名でアイコンを設定できるので分かりやすいかと思います。アイコンと単語の対応は公式サイトの一覧表で確認できます。

今回、意味がなるべく合致するアイコンを選んでいます。そのほうが人にもウェブにもロボットにも優しいのではないか?というセマンティックウェブ的な発想からです。
ただまあ、個人的好みというのもあるので、そこは単語を変えれば好きな文字、カタチに変更できます。

sponsored

実例を画像で紹介

どんなふうに変わったか、画像でご紹介します。

例えば、記事ページ上部です。

  • パンくずリストのアイコン
  • レーティングスターの星アイコン
  • 記事作成日、更新日のアイコン
  • モバイルのフッターアイコン

がご覧のように変わっています。

記事下部を見てみます。

  • カテゴリアイコン、タグアイコン
  • オーサーのアイコン

を変更しています。
タグアイコンは、ここではアイコンフォントではなく、文字のシャープ「#」としてツイッターなどのタグ表記と合わせています。

以上、CocoonでアイコンフォントをすべてGoogle製アイコンに置き換える方法でした。

コメント