fontawesomeを疑似要素で使用したいのに変な記号になったりして、
全然うまく表示できないんですけど！
っていう人に向けた記事です。
私もこれ、ほんとこれ。
めっちゃ単純なことでした。
fontawesomeを疑似要素で適応するには
fontawesomeはデスクトップにフォントとしてもインストールできるし、
デザイン時にシェイプでも入れ込めるし、
CDN一行入れただけですぐ使えるし、
フリー版でもめちゃめちゃ使いやすいアイコンいっぱいあるし、
デザインも結構なんにでもあうし
ってことで重宝してずっと使用してます。
でもなんか、５になってから、
疑似要素上手く表示できないんですけど！？
ってことが多々ありまして、
色々検索して調べてみたら、めっちゃ単純なことで解決しました。
こちらにも記載されていますが…
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:
- Set the pseudo-element to match either the ::before or ::after you used in the previous common set up step
- Set the font-family to Font Awesome 5 Free or Font Awesome 5 Pro (depending on which one you are using)
- Set the font-weight: 900 (Solid), 400 (Regular or Brands), 300 (Light)
- 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;
ってちゃんと書いてありますわ！！
本家サイト英語だから流し読みしてたわ…
英語弱いからちゃんと理解できてなかったわ…
というお話でした。