てがきノートでは、SNSシェア・フォローの見出しにアイコンを入れています。
![](https://usort.jp/cocoon/wp-content/uploads/2023/02/image-1024x380.png)
CSSでのカスタマイズとなりますが、この方法で書き換えられますのでお試しください。
SNSシェア・フォローの見出しアイコンはFont Awesomeを使用しています
SNSシェア・フォローの見出しアイコンは、Cocoonに標準で組み込まいるFont Awesome(Webサイトにアイコンフォントを簡単に表示させることができるWebサービス)を使用しています。
Font Awesomeにはバージョン毎にフォント数が変わっており、数字が大きければ大きいほどアイコンが多くなります。
Font Awesome 5をCocoonで使う場合は以下の方法で設定してください。
![](https://usort.jp/cocoon/wp-content/uploads/cocoon-resources/blog-card-cache/6ab1dc82466a675e45d9fe868744c591.jpg)
Font Awesome5を利用する方法
サイトで利用されているアイコンフォントをFont Awesome5に変更したり、Font Awesome4に戻したりする方法です。
SNSシェア・フォローの見出しアイコンの変更方法
SNSシェア・フォローの見出しアイコンの変更方法の説明です。
【ステップ1】WordPress側の準備
WordPressにログインして、ダッシュボードで外観 > カスタマイズの順にクリックします。
![](https://usort.jp/cocoon/wp-content/uploads/2023/02/image-4.png)
カスタマイズの画面から追加CSSをクリックします。
![](https://usort.jp/cocoon/wp-content/uploads/2023/02/image-2.png)
CSSの入力欄に↓のコードをコピーして貼り付けます。
.sns-share-message:before, .sns-follow-message:before {
content: "\";
}
![](https://usort.jp/cocoon/wp-content/uploads/2023/02/image-3.png)
ひとまずこのままにしておいてください。
【ステップ2】Font Awesome 4 or 5 で設定したいアイコン選び
以下のFont Awesomeのホームページをクリックして、設定したいアイコンをお探しください。
ここではFont Awesome 5を例に書いていきます。
Font Awesome 5に移動したら英語でアイコン検索をして、好きなアイコンをクリックします。
![](https://usort.jp/cocoon/wp-content/uploads/2023/02/image-1-1024x658.png)
画面が表示されたら、fから始まる英数字をクリックすると英数字がコピーされます。
![](https://usort.jp/cocoon/wp-content/uploads/2023/02/7a07b35751f0a3e728218bda740c6620-1024x650.jpg)
【ステップ3】WordPressでアイコン設定
ステップ1の画面に戻り\(バックスラッシュ)の後ろにステップ2でコピーした英数字を貼り付けます。
![](https://usort.jp/cocoon/wp-content/uploads/2023/02/image-5.png)
左上にある公開をクリックします。
![](https://usort.jp/cocoon/wp-content/uploads/2023/02/image-6.png)
これで完了です!
SNSシェア・フォローの見出しアイコンのビフォーアフター
SNSシェア・フォローの見出しアイコンのビフォーアフターは以下となります。
見出しアイコン変更前
![](https://usort.jp/cocoon/wp-content/uploads/2023/02/image-1024x380.png)
見出しアイコン変更後
![](https://usort.jp/cocoon/wp-content/uploads/2023/02/image-7-1024x404.png)
コメント