WordPress

WordPress|AFFINGER5でFontAwesomeが表示されない問題を解決

AFFINGER5を使ってブログを運営していますが、Webアイコン「FontAwesome」が表示されない問題でずーーっと悩んでいました。知りたかったのは単体で使う方法。

やっと解決できたので情報共有したいと思います。

FontAwesomeとは?

FontAwesomeとは、Webサイトで使えるアイコン(Webアイコン)で FontAwesome.com で配布されているものです。

例えば・・・

 

 

 

といったアイコン。これで何がしたかったかというと、情報の視覚化です。例えばこんな感じに…

 

  WordPressテーマ 「WING(AFFINGER5)」

 

たったこれだけのことに1週間ぐらい悩み、調べまくりました。その結果わかったのが、バージョンによってコードの「ある部分」に違いがあることでした。

 

使えるFontAwesomeのバージョンは?

2019年11月現在、AFFINGERで使えるのはFontAwesomeのバージョン4まで。「FontAwesome」で検索して出てくる一番上のサイト(もちろんFontAwesomeのページ)のアイコンはバージョン5なので使えないんです。AFFINGERでも以下のような説明をしています。

 

AFFINGER公式発表

専用のスクリプトを併用しても旧AFFINGER4及び専用プラグインご利用者様との互換性が完全に維持できない可能性が高いためFontAwesome5への移行を見送った。

 

それでは、FontAwesomeの新旧バージョンそれぞれのページを見てみましょう。

 

  FontAwesomeバージョン5のページ

FontAwesome最新ページのアイコンはここから

 

  FontAwesomeバージョン4のページ

FontAwesomeVer4.7のアイコンはココから

 

ご覧のとおり新旧バージョンでページが全然ちがいます。が、私にはサイトデザインが変わっただけにしか思えませんでした…。次に、バージョンによってどこが違うのか? なぜ新バージョンではアイコンが表示されないのか? を説明します。

 

FontAwesomeのバージョン違いとは?

FontAwesomeのWebアイコンはサイトからコードをコピーして使いますが、そのコードを見比べると「バージョン違い」がよくわかります。実際に見てみましょう。

アイコン: 

バージョン5:<i class="fas fa-address-book"></i>
バージョン4:<i class="fa fa-address-book" aria-hidden="true"></i>

灰色の部分は無視してOK、赤字の部分に注目してください。バージョン4だと『fa』の2文字なのにバージョン5だと『fas』と3文字になっています(3文字目が以外のパターンもあります)。これこそがバージョンの一番の違い、そしてWebアイコンが表示されない原因だったのです。バージョン4のサイトからコードをコピーした場合は『fa』の2文字になっているため、そのまま使うことができます。というわけで、使いたいWebアイコンはFontAwesomeバージョン4のページから探しましょう!!

 

・・・って、待てよ?

3文字目消したら使えるんじゃね?

こんな疑問が頭をよぎりました。疑問を持ったら即実験です。

 

FontAwesomeバージョン5も実は使える?

AFFINGE5でFontAwesomeバージョン5をそのまま使おうとすると、下のように「ただの四角」が表示されます。念のためPCでどう見えているのかがわかる画像も貼っておきます。

 

fontawesomeが表示されない問題

 

ではバージョン5の3文字目を消すだけで使えるのか。

<i class="fas fa-address-book"></i>これを
<i class="fa fa-address-book"></i>に修正してみると・・・

 

ちゃんと表示されていますね。実はバージョン5のコードも『fas』の3文字目を消すことで表示させることができるのです。ただし、これができるのはAFFINGER5だけかもしれません。中にはAFFINGER5で3文字目を消しても使えないコードがあるかもしれないので、過度の期待は禁物です。

 

FontAwesomeの使い方

 

コードをコピーする方法

 FontAwesome|バージョン4

FotAwesomeバージョン4のコード取得手順

  FontAwesomeバージョン4のページ

 

 FontAwesome|バージョン5

FontAwesomeバージョン5のコード取得手順

  FontAwesomeバージョン5のページ

 

マイボックスで使う場合

st-mybox title="ポイント" fontawesome="fa-check-circle" color="#757575" bordercolor="#BDBDBD" bgcolor="#ffffff" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"

 

赤字の部分にコード<i class="fa fa-address-book"></i>の太字の部分をコピペするだけです。バージョン5のコードをコピーした場合は、貼り付けたあと「fa」の3文字目(〇の部分)を忘れずに消してください。

 

単体で使う場合

ビジュアルエディタではなくテキストエディタで貼り付けます。しかし、ただ貼り付けただけでは表示されません。具体例はこちら。

 

Webアイコンを単体で使う方法
  1. Webアイコンのコードを<p></p>で囲む
  2. </p>の直前に『&nbsp;』を入れる

注意ポイント

Webアイコンを単体で使った場合、ビジュアルエディタには表示されません。プレビューでアイコンが表示されているかどうかを確認してください。

 

FontAwesomeのWebアイコンをアレンジする方法

アイコンを大きくしたり動かしたりもできます。くわしくはこちらからどうぞ。英語のページですが直感的にわかると思います。

 FontAwesome|Examples

 

GoogleのMaterial iconsの使い方

Material iconsも上で紹介した「単体で使う場合」と同じ方法で表示させることができます。Material iconsを使う場合には、[AFFINGER5管理]→[デザイン]→ 画面一番下にあるGoogleマテリアルアイコンの「使用する」にチェックを入れて保存し、使える状態にしておいてください。

 

使わなくても特に問題ないWebアイコンですが、これで情報を視覚化できるので便利・・・なのかもしれません。それでは、楽しいブログライフを♪

 

 

おわり

 

-WordPress
-, , ,

Copyright© Aozorake , 2020 All Rights Reserved.