このブログは間もなく「Webis Tech LABO.」に移設予定です。
Webis Tech LABO.はこちら

2020.11.25

【簡単】擬似要素でfontawesomeを表示する方法【CSS】

こんにちは。

大学生WEBコーダーのYUJIROです。

 

今回は、「擬似要素でfontawesomeを表示する方法」について解説していきます!

 

見本はこちら!

 

See the Pen poEzPMP by ゆーじろー (@yujiron) on CodePen.

 

 

しっかり擬似要素でfontawesomeが表示されていますね。

 

僕自身も擬似要素でfontawesomeを表示することができず、つまづいた時もありました。

 

しかし今回紹介する方法を使えば、簡単に擬似要素でfontawesomeアイコンを表示できるようになります。

fontawesomeアイコンを使いこなせるようになると、あなたの実装の幅も広がります。

 

5分ほどで終わるので、是非参考にしてください!

 

 

【簡単】擬似要素でfontawesomeを表示する方法【CSS】

見本のように、擬似要素でfontawesomeを表示するには

 

 

① fontawesomeのCDNを読み込む

② HTMLのコーディング

③ CSSのコーディング

 

 

この3つのステップを踏むことで、擬似要素でfontawesomeアイコンを表示することができるようになります!

 

① fontawesomeのCDNを読み込む

まずはfontawesomeのCDNを自分が表示したいHTMLファイルのheadタグの中に入れる作業をします。

これをしないと、コードがあっていても、fontawesomeアイコンが表示されません。

 

fontawesomeのCDNの読み込み方については、こちらの記事がわかりやすいです!

もし分からない方がいたら、是非参考にしてください。

 

② HTMLのコーディング

fontawesomeのCDNをHTMLファイルのheadタグの中に入れることができたら、次はHTMLのコーディングをしましょう!

 

今回は、「fontawesome」の文字の左側に、fontawesomeで読み込んだアイコンを表示してみます。

 

 

「.btn」というclassの中に、aタグを入れたシンプルなボタンの実装ですね。

 

③ CSSのコーディング

最後にCSSの擬似要素でfontawesomeアイコンを表示します!

ここからが本題ですね。

 

 

1行目〜51行目は、リセットCSSのコードを書きました。

リセットCSSを指定することで、ブラウザがデフォルトで持っている余白などを消してくれるので、コーディングがやりやすくなります。

 

そして55行目〜70行目が、今回のテーマである「擬似要素でfontawesomeを表示する」コーディングです。

 

55行目〜58行目は、「.btn」classをブラウザの真ん中に持ってきて、上下に余白を持たせることで、見やすいように表示。

 

 

 

59行目〜64行目は、「.btn」classの中にあるaタグに幅を持たせるコーディングをしています。

まず「display: inline-block;」を指定して、aタグをインラインブロック要素にする。

インラインブロック要素は余白を持つことができるので、「padding: 15px 40px;」でボタンの余白を持たせる。

そして「border: 1px solid black;」でボタンの枠を作ります。

最後に「color: black;」で文字の色を黒にします。

 

 

65行目〜70行目は、擬似要素を使って、fontawesomeアイコンを表示するコーディングです。

 

 

まずは「.btn a::before」とすることで、「.btnの中にあるaタグの前」にfontawesomeを表示させます。

次に「content: “\~~~”;」のように、使いたいfontawesomeアイコンのユニコードを「〜〜」の部分に書く。

 

今回は見本で使った「thumbs-up」のアイコンで紹介します。

以下の画像の赤矢印が指している「f164」のコードを、先ほどの「content: “\~~~”;」の中に入れます。

 

 

 

そして、「font-weight: 400;」を書くことで、しっかりfontawesomeアイコンが表示されます。

「font-weight」のコードがないと、fontawesomeアイコンが表示されないので、こちらもコーディングしてください。

 

fontawesomeは、フォントとしてみなされるので、「font-family: “Font Awesome 5 Free”;」でfont-familyも指定しましょう!

 

ここまででのコーディングで、擬似要素でfontawesomeアイコンが表示されたと思います。

 

このままだと、aタグのすぐ横にfontawesomeアイコンが表示され、詰まって見える。

なので、「padding-right: 10px;」を入れて、右側に余白をつけてあげましょう!

 

これで擬似要素でfontawesomeアイコンを表示することができました!

 

 

擬似要素でfontawesomeが表示されない時は?

最後に、擬似要素でfontawesomeが表示されない時がたまにおきます。

そんな時は、以下の3つのことが抜けていないかチェックしてみましょう!

大体表示されない時は、以下の3つのうちどれかが抜けていることが多いので、、、。

 

① headタグの中に、fontawesomeのCDNを書いていない

まずは、あなたがfontawesomeを表示したと思っているHTMLファイルの中のheadタグに、しっかりfontawesomeのCDNが書かれているのか?を確認してみましょう!

いくらコードが合っていたとしても、CDNが抜けていると一生fontawesomeアイコンを表示することはできません。

 

② font-weightを指定していない

「font-weight」のコードがないと、fontawesomeアイコンが表示されません。

こちらのコードが抜けている場合が個人的に多かったので注意です!

 

③ fontawesomeアイコンのコードが適切でない

CSSにコーディングする際に、fontawesomeアイコンのコードが適切でないと、上手く表示されません。

以下の画像のように、<i>タグのコードではなく、赤矢印のユニコードをコーディングするようにしましょう!

 

 

こちらも間違っているかもしれないので、fontawesomeアイコンが表示されない場合は、是非確認してください!

 

まとめ

以上が、擬似クラスでfontawesomeアイコンを表示する方法についてでした!

ポイントさえ押さえたら、簡単なので、是非これからのコーディングに活かしてください!

 

 

CONTACT
RECRUIT

お仕事の依頼・ご相談は
こちらからお問い合わせください。

私たちと働いていただける方を募集しています。