【解決済み】FontAwesome5を疑似クラス(before)で表示させたいけど、うまく表示されない

ブログ ホームページ制作

ちょっと前にFontAwesomeが5になって、デザインもちょっと変わりましたね。

4にあったアイコンがなくなってたり、疑似クラスで出す時の出し方が変わってたりしてます。
その中で疑似クラスを使って出す場合ちょっと手こずったので表示方法を紹介します。

FontAwesome5

FontAwesomeって何?

FontAwesome(フォントオーサム)とは、アイコンフォントを呼ばれるフォントサービスです。
フォントをダウンロードすればillustratorやPhotoshopでも使用可能です。

かなりレベルの高いアイコンで、メールとかSNSとかのデザインもあり結構使います。
コーディングもこれがあるとかなり楽です。

FontAwesome5の使い方

使い方は主に2つ

  • アイコンを使って表示
  • CSSの疑似クラスを使って表示

アイコンを使って表示する方法

  1. FontAwesomeのjsを読み込みます。
  2. アイコンをコピー
  3. おきたい場所に貼り付け

これでOKです。
jsはCDNがあるので、これを読み込みましょう

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

CSS版はこちら

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

CSSの疑似クラスを使って表示

次に疑似クラスを使って表示ですが、基本的には、FontAwesome 4の時と同じなんですが、うまくでない理由は主に2つ

  • フォントファミリーが違う
  • JS版はFontAwesomeの設定を変える必要がある

フォントファミリーですが、まず下の画像を見て欲しい。

font-family: “Font Awesome 5 Solid”;
font-family: “Font Awesome 5 Regular”;
font-family: “Font Awesome 5 Light”;
font-family: “Font Awesome 5 Brands”;

■CSS版のフォントファミリーはこちら

font-family: "Font Awesome 5 Free";

微妙にフォントファミリーの設定を変更しないといけないみたいです。
CSS版は、太さによっては出てこないことがあるみたいなので、CSS版が出てこない人は、太さを変えてみよう。

JS版だと設定を変更する必要があるみたいです。

<script> FontAwesomeConfig = { searchPseudoElements: true }; </script>

※JS版だとSVGが読み込まれるんですが、サイズの変更はsvg[font-size:数字;]で変更可能。
※beforeにdisplay:none;を入れてやるとsvgだけが残ります。楽してデザインしようぜ!

公式サイトはこちら → https://fontawesome.com/

気に入った記事であれば、ぽちっとお願いします<(_ _)>