>WordPressWordPress|AFFINGER5でFontAwesomeが表示されない問題を解決2019年11月20日AFFINGER5を使ってブログを運営していますが、Webアイコン「FontAwesome」が表示されない問題でずーーっと悩んでいました。知りたかったのは単体で使う方法。解決できたので情報共有したいと思います。配布されているものです。・・・といったアイコン。これで何がしたかったかというと、情報の視覚化です。「WING(AFFINGER5)」たったこれだけのことに1週間ぐらい悩み、調べまくりました。その結果わかったのが、バージョンによってコードの「ある部分」に違いがあることでした。使えるFontAwesomeのバージョンは?2019年11月現在、AFFINGERで使えるのはFontAwesomeのバージョン4まで。「FontAwesome」で検索して出てくる一番上のサイト(もちろんFontAwesomeのページ)のアイコンはバージョン5なので使えないんです。AFFINGERでも以下のような説明をしています。専用のスクリプトを併用しても旧AFFINGER4及び専用プラグインご利用者様との互換性が完全に維持できない可能性が高いためFontAwesome5への移行を見送った。それでは、FontAwesomeの新旧バージョンそれぞれのページを見てみましょう。FontAwesomeバージョン5のページFontAwesomeバージョン4のページご覧のとおり新旧バージョンでページが全然ちがいます。私にはサイトデザインが変わっただけにしか思えませんでした...。FontAwesomeのバージョン違いとは?FontAwesomeのWebアイコンはサイトからコードをコピーして使いますが、そのコードを見比べると「バージョン違い」がよくわかります。実際に見てみましょう。aria-hidden="true"></i>灰色の部分は無視してOK、赤字の部分に注目してください。バージョン4だと『fa』の2文字なのにバージョン5だと『fas』と3文字になっています(3文字目がs以外のパターンもあります)。これこそがバージョンの一番の違い、そしてWebアイコンが表示されない原因だったのです。バージョン4のサイトからコードをコピーした場合は『fa』の2文字になっているため、そのまま使うことができます。いうわけで、使いたいWebアイコンはFontAwesomeバージョン4のページから探しましょう!!・・・って、待てよ?3文字目消したら使えるんじゃね?こんな疑問が頭をよぎりました。疑問を持ったら即実験です。FontAwesomeバージョン5も実は使える?AFFINGE5でFontAwesomeバージョン5をそのまま使おうとすると、下のように「ただの四角」が表示されます。念のためPCでどう見えているのかがわかる画像も貼っておきます。バージョン5の3文字目を消すだけで使えるのか。fa-address-book"></i>に修正してみると・・・ちゃんと表示されていますね。実はバージョン5のコードも『fas』の3文字目を消すことで表示させることができるのです。これができるのはAFFINGER5だけかもしれません。中にはAFFINGER5で3文字目を消しても使えないコードがあるかもしれないので、過度の期待は禁物です。fa-address-book"></i>の太字の部分をコピペするだけです。バージョン5のコードをコピーした場合は、貼り付けたあと「fa〇」の3文字目(〇の部分)を忘れずに消してください。単体で使う場合ビジュアルエディタではなくテキストエディタで貼り付けます。貼り付けただけでは表示されません。Webアイコンのコードを<p></p>で囲む</p>の直前に『&nbsp;』を入れる注意ポイントWebアイコンを単体で使った場合、ビジュアルエディタには表示されません。プレビューでアイコンが表示されているかどうかを確認してください。FontAwesomeのWebアイコンをアレンジする方法アイコンを大きくしたり動かしたりもできます。くわしくはこちらからどうぞ。英語のページですが直感的にわかると思います。iconsも上で紹介した「単体で使う場合」と同じ方法で表示させることができます。画面一番下にあるGoogleマテリアルアイコンの「使用する」にチェックを入れて保存し、使える状態にしておいてください。使わなくても特に問題ないWebアイコンですが、これで情報を視覚化できるので便利・・・なのかもしれません。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。雑記アーカイブ2020年2月2019年12月2019年11月2019年10月2019年9月パソコン自作が不安ならBTOBTOパソコンとは、パソコン専門店が販売する受注生産方式のショップブランドパソコンのこと。パソコンの違いについては下の記事を読んでね。