ストークで最新版のFont Awesome(5.5.0)を使う方法

ストークで最新のFont Awesome 5を使う方法

こんにちは、ストーク大好きくまぺです。

ストークでは標準でFont Awesomeが利用できますが、バージョンが4.7.0と少し古くなっています。

 

Font Awesomeはバージョン5で大きく変わったので、現在Font Awesomeで検索したコードをそのまま貼り付けても表示されないことがあります。(古いバージョンの場合はclassの”fab”や”fas”を”fa”に変えると表示されることがあります)

このままでは何かと不便なので、この機会に最新のFont Awesomeを使えるようにしてみました。

Font Awesome 5を使えるようにする方法

Font Awesomeをダウンロード

まずはFont Awesomeをダウンロードします。

参考:Font Awesome

Download」をクリックし、ダウンロードしたzipファイルを解答します。

 

FTPで必要なファイルをアップロード

解答したファイルの中から、必要なファイルをサイトの子テーマにFTPでアップロードしましょう。

子テーマ内に「library」というフォルダを作り、その中に「css」というフォルダを作成します。

「library」の中に、Font Awesomeの「webfont」というフォルダをフォルダごとコピーし、

「css」の中に、Font Awesomeのcssフォルダに入っている「all.min.css」というファイルをアップロードします。

 

最終的な構成は以下のようになります。

 

SNSシェアボタンのアイコンを修正する

SNSのシェアボタンは手作業で変更する必要があります。

子テーマに「parts_sns.php」と「parts_sns_short.php」の2つのファイルを親テーマからコピーして用意してください。

 

各ファイルのTwitterFacebookPocketのコードを修正します。

それぞれの「<i class=”fa fa-〇〇(sns名)”></i>」を、

<i class=”fab fa-〇〇(sns名)”></i>」に修正します。

つまり、classの”fa”を”fab”に変更します。

(例:<i class=”fa fa-twitter”></i> → <i class=”fab fa-twitter”></i>)

 

これでSNSシェアボタンの修正は完了です。

 

functions.phpに追加

最後に、子テーマのfunctions.phpに以下のコードを追加します。

 

以上でFont Awesome 5の設定は完了です。

 

まとめ

ストークでFont Awesome 5を利用する方法を紹介しました。

 

標準で読み込まれている古いバージョンのFont Awesomeを無効化しようとしたのですが、修正箇所が多すぎてcssも冗長になってしまうので、残しておくことにしました。

 

公式で対応してもらえると嬉しいなぁ…



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください