WordPress便利なアイコン【FontAwesome】使用時の注意点！

フクロウ( Fukurou_Japan)です。

今回はwebサイトのアイコンでよく使われているFontAwesomeについてです。

どんなものかと言いますと、この記事の冒頭でTwitterの鳥が動いていますが、そのアイコンがまさにそれです。→

ちなみにTwitterのあの鳥は『ムジルリツグミ』という種類だそうです。

引用元：ツイッターの青い鳥の名前と種類は？鳥マークには意味がある？

WordPress便利なアイコン【FontAwesome】使用時の注意点！

そもそもの話ですが、『読み方は？』って思いますよね？

これは『フォントオーサム』と読むそうです。

今回は具体的なやり方は省略します。

詳細な設定方法などについてはいろいろな方が紹介されているのでそれらのサイトをご覧ください。

分かりやすいサイトはこちらですね。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

上記のサイトに導入方法やサイズの変更、色の変更方法が詳しく書かれています。

ただし、CSSをいじる部分も出てくるので自信のない方はいじらないほうが良いです。

fontAwesome使用時の注意点！

では本題の注意点についてです。

FontAwesomeにはバージョンがあります。

現在はバージョン5.◎◎ですが、しばらくすると6.◎◎に変更になると思われます。

このバージョンはHTMLのHEADのあたりで読み込んでいるのですが、そのバージョンが古いままだと新しいアイコンが使えなかったりします。

例：これはバージョン5.6.1

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

逆に、HEAD内に読み込ませている部分のバージョンのリンクをバージョン4.◎◎からバージョン5.◎◎に変更したことにより、バージョン4.◎◎で設定していたアイコンが表示されなくなる可能性もあります。

上記を踏まえて私がオススメする使用方法は以下です。

１　まだ何もFontAwesomeのアイコンを設定してない場合

→この場合はHEAD内のバージョンを上げる作業をしてもよい

２　すでにいくつかアイコンを使ってしまっている

→どれが表示されてどれが表示されなくなるのかわからないので、そのサイトでは現在のバージョンのまま使い続ける（バージョンアップしない）

３　よくわからない場合（テンプレートがデフォルトでいろいろなところで使用している可能性まおる）

→この場合もバージョンを上げないほうが無難

このような感じです。

なお、バージョン４のアイコンはこちらのページから、

バージョン5のアイコンはこちらのページからコードを取得できます。

必ずアナタが使っているバージョンのものをお使いください。

これを理解せずに使用すると『あら？　表示されない・・』ということになりかねませんので・・。

その他に知っておいたほうが良い点として以下を挙げておきます。

FontAwesomeのサイトからコードを自分でコピーしてうまく表示できなかった場合には、他の人がブログなどで表示しているサンプルを自分のブログに貼り付けてみる　というやり方をすると良い

これは自分の間違いを一切排除するために行う方法です。

それもできれば、同じ人のブログだけではなく、別の人のブログも見てコードを真似るという行動をするとより良いですね。

この考え方は今回の件以外でもWordpressで困った時に使えるテクニックですので覚えておくと良いでしょう。

まとめ

いい感じのアイコンが表示できるようになりましたか？

アイコンを編集するのは面白いので、はまってしまうと長時間いじってしまう可能性があるのでご注意ください！

アイコンがありすぎてもしつこいですが、無さすぎると寂しいので適度に使用すると良いですね。

それではまた次回！