《Cocoon》Font Awesome 5 の変更手順【初心者向け】

Cocoonカスタマイズ

2022.04.19 2022.04.04

Font Awesomeとは
CocoonのFont Awesome 5の有効化
Font Awesome 5 を有効にする方法
Font Awesome 5 のアイコンを利用してみよう！

Font Awesomeとは

Font Awesomeは、予めWebアイコンとして設定されたアイコンをアイコンフォント（文字）として利用できるようにした一種のツールです。

ハートマーク、丸型、箱型といった基本的なアイコンから、初心者マーク、猫、骨などの変わったアイコンと幅広く用意されており、サイトをカスタマイズする上での見た目を良くしてくれます。

以下がWebフォント（Font Awesome）の例です。

このアイコンを利用すれば、以下のようなデザインの見出しが作成できます。

アイコン「雷」マークを利用して見出しを作成してみました。

#search-5 h3{
	background-color:white;
	border-bottom:dotted 2px #000000;
	padding:5px;
}
#search-5 h3:before{
	font-size:28px;
	color:black;
	margin-right:7px;
	font-family: "Font Awesome 5 Free";
	content: "\f0e7";
}

見出しのサンプル（ソースコード）は以下のリンクを参考にしてください。

CocoonのFont Awesome 5の有効化

Cocoonでサイトアイコンを利用する際には「Font Awesome 4」から「Font Awesome 5」へ切り替える必要があります。

ただし、Font Awesome 4でWebアイコンが使えないということではありません。Font Awesomeのバージョンが上がるにつれて既存のアイコンは利用できなくなります。しかし、アイコンがバージョンに対応しているのであれば利用することができます。

利用できないアイコンに関しては、

アイコンが表示されない
空白で表示される

といった不具合が出てきます。

こんな感じで「□」で表示されることもあります。

また、古いバージョンのアイコン（Font Awesome 4など）を利用する場合には、最新版では無く、Font Awesome 4に対応したアイコンを探すようにしましょう。

Font Awesome 4 を利用したソースコードサンプル

#search-5 h3:before{
	font-size:28px;
	color:black;
	margin-right:7px;
	font-family: "FontAwesome"; /*スペースは無し*/
	content: "\f013"; /*Font_Awesome「4」に対応したアイコン*/
}

対して、Font Awesome 5 を利用したソースコードサンプル

#search-5 h3:before{
	font-size:28px;
	color:black;
	margin-right:7px;
	font-family: "Font Awesome 5 Free"; /*スペースは有り*/
	content: "\f013"; /*Font_Awesome「5」に対応したアイコン*/
}

また、Font Awesome 4のアイコンは、Font Awesome 5で利用できる場合があります。

一部、バージョンアップに伴い、廃止されたアイコンもあるようです。

今後は、Font Awesome 4では無く、新しいFont Awesome 5に移行する上で、主流となるFont Awesome 5への設定の切り替えをお勧めします。