【fontawesome】を::before,::afterの疑似要素で表示させるには…

2019.05.08|サイト構築

fontawesomeを疑似要素で使用したいのに変な記号になったりして、
全然うまく表示できないんですけど!
っていう人に向けた記事です。
私もこれ、ほんとこれ。
めっちゃ単純なことでした。

fontawesomeを疑似要素で適応するには

fontawesomeはデスクトップにフォントとしてもインストールできるし、
デザイン時にシェイプでも入れ込めるし、
CDN一行入れただけですぐ使えるし、
フリー版でもめちゃめちゃ使いやすいアイコンいっぱいあるし、
デザインも結構なんにでもあうし

ってことで重宝してずっと使用してます。

でもなんか、5になってから、
疑似要素上手く表示できないんですけど!?

ってことが多々ありまして、
色々検索して調べてみたら、めっちゃ単純なことで解決しました。

こちらにも記載されていますが…

Font Awesome 5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処方法

https://www.genius-web.co.jp/blog/cat-101/font-awesome5-resolution.html

font-weightでした…

引用元の記事にも書いてありますが、
fontawesomeのアイコンにはそれぞれfont-weightが設定されているらしくて、
中にはちゃんとfont-weightを設定しないと表示できないものがあるんだとか~~

なんかいろいろ書きこんでたのに、
それだけだったんかい…

なんだか拍子抜け

本家サイトでもちゃんと記載がありました

ちなみに、本家サイトではCSS疑似要素に関してはこちらに記載があります。

CSS Pseudo-elements

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

ちゃんと書いてありますわ!


How to Define an Icon Using CSS Pseudo-Elements
Define Common CSS for all Icons
Firstly, there are some common CSS properties that apply to all icons. It’s best to get this out of the way first in your CSS so that your icon definitions because simple.

Reference Individual Icons
There are four important parts to include when referencing any individual icon:

  1. Set the pseudo-element to match either the ::before or ::after you used in the previous common set up step
  2. Set the font-family to Font Awesome 5 Free or Font Awesome 5 Pro (depending on which one you are using)
  3. Set the font-weight: 900 (Solid), 400 (Regular or Brands), 300 (Light)
  4. Set the content to the unicode value of one of our icons

How to Define an Icon Using CSS Pseudo-Elements

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

Set the font-weight: 900 (Solid), 400 (Regular or Brands), 300 (Light)

って書いてありますわ!

ちなみに、

  • Solid → font-weight:900;
  • Regular or Brands → font-weight:400;
  • Light → font-weight:300;

 
ってちゃんと書いてありますわ!!

本家サイト英語だから流し読みしてたわ…

英語弱いからちゃんと理解できてなかったわ…

というお話でした。