【てがきノート】SNSシェア・フォローの見出しアイコンの変更方法

てがきノートでは、SNSシェア・フォローの見出しにアイコンを入れています。

CSSでのカスタマイズとなりますが、この方法で書き換えられますのでお試しください。

スポンサーリンク

スポンサーリンク

SNSシェア・フォローの見出しアイコンはFont Awesomeを使用しています

SNSシェア・フォローの見出しアイコンは、Cocoonに標準で組み込まいるFont Awesome(Webサイトにアイコンフォントを簡単に表示させることができるWebサービス)を使用しています。

Font Awesomeにはバージョン毎にフォント数が変わっており、数字が大きければ大きいほどアイコンが多くなります。
Font Awesome 5をCocoonで使う場合は以下の方法で設定してください。

Font Awesome5を利用する方法

サイトで利用されているアイコンフォントをFont Awesome5に変更したり、Font Awesome4に戻したりする方法です。

wp-cocoon.com

SNSシェア・フォローの見出しアイコンの変更方法

SNSシェア・フォローの見出しアイコンの変更方法の説明です。

【ステップ1】WordPress側の準備

WordPressにログインして、ダッシュボードで外観 > カスタマイズの順にクリックします。

カスタマイズの画面から追加CSSをクリックします。

CSSの入力欄に↓のコードをコピーして貼り付けます。

.sns-share-message:before, .sns-follow-message:before {
    content: "\";
}

ひとまずこのままにしておいてください。

【ステップ2】Font Awesome 4 or 5 で設定したいアイコン選び

以下のFont Awesomeのホームページをクリックして、設定したいアイコンをお探しください。

ここではFont Awesome 5を例に書いていきます。

Font Awesome 5に移動したら英語でアイコン検索をして、好きなアイコンをクリックします。

画面が表示されたら、fから始まる英数字をクリックすると英数字がコピーされます。

【ステップ3】WordPressでアイコン設定

ステップ1の画面に戻り＼(バックスラッシュ)の後ろにステップ2でコピーした英数字を貼り付けます。

左上にある公開をクリックします。

これで完了です！

SNSシェア・フォローの見出しアイコンのビフォーアフター

SNSシェア・フォローの見出しアイコンのビフォーアフターは以下となります。

見出しアイコン変更前

見出しアイコン変更後