現在「みるらいと」スキンを適用中です。

Font Awesome5を利用する方法

テーマ全般
この記事は約2分で読めます。

Cocoon 2.0.0からFont Awesome5を利用できるようになりました。

機能変更1つで、Font Awesome4→5に変更することができます。

スポンサーリンク

Font Awesome5への変更方法

まずはテーマ設定を開きます。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

「全体」タブの「サイトアイコンフォント」で「Font Awesome5」を選択してください。

サイト全体で使用するアイコンフォントを選択します。

この設定変更のみで、アイコフォント変更することが可能です。

Font Awesome5のアイコンは、こちらから検索して取得することが可能です。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
スポンサーリンク

注意点

この機能の注意点。

デフォルトはFont Awesome4

「サイトアイコンフォント」機能は、現在Font Awesome4がデフォルトです。

なので、Font Awesome5に変換する際はPHP処理により対応させています。

ただ、今後利用状況によってはFont Awesome5がデフォルトになる可能性が高いです。

いずれにせよ、普通にFont Awesomeを利用している限りでは、問題なく利用できるかと思います。

CSSでFont Awesomeカスタマイズしている場合は注意

Cocoon 2.0.0からは、基本的にテーマで使用するFont Awesomeは、以下のようなHTMLコードを利用することにしています。

<span class="fa fa-star" aria-hidden="true"></span>

なので、CSS等で以下のようなコードを書いてカスタマイズしている場合は、Font Awesomeアイコンが二重に表示されてしまう場合もあるかもしれません。

.selector:before{
  font-family: 'FontAwesome';
  content: '\f111';
}

そういった場合は、お手数ですが各自でのカスタマイズ修正対応をお願いいたします。

テーマ全般 テーマ設定
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年2ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon

コメント テーマの質問はフォーラムへ

  1. だいずパパン より:

    Cocoon 2.0.0カラーは、基本的にテーマで使用するFont Awesomeは、以下のようなHTMLコードを利用することにしています。

    なぜこのようにしたのですか?
    たくさんの方がCSSでカスタマイズしてると思うのですが…

    • わいひらわいひら より:

      今後、Font Awesome5が主流となっていく上で、今後出来る限り保守がしやすいようにです。
      WEB上の変化は開発時予想していたものとは違うものになる場合もあるので、そういった変化にも対応する必要があります。
      出来る限り、仕様は変更しないようにしたぃとは思いますが、今の開発を続ける上で行わなければならない時は行う必要があると思っています。

タイトルとURLをコピーしました