fontawesomeのフリープランのアイコンをcssの:before/:afterで挿入する方法

2020年12月4日 2021年1月21日

HTML・CSS

いつも忘れるので、自分用メモ。

::before{font-family: "Font Awesome 5 Free"; content: '\f1d8'; font-weight: 900;}

参考サイト

fontawesomeのアイコンをcssの:before/:afterで挿入する

https://blog.ttskch.com/fontawesome-icon-css-before-after/

cssのcontentプロパティではHTMLを挿入することはできません。 /* できない */ h1:before { content:

Googleのマテリアルアイコンを使用する場合はこちら。

Googleマテリアルアイコンをcssのbeforeやafter(疑似要素)で表示する方法 | imasas...

https://imasashi.net/material-icons_css.html

タイトル通り、cssの疑似要素でアイコンを表示したい時に、background-imageで画像表示するのもイマドキじゃないかなぁと思って調べたら、ちゃんとやり方があった。 CSSで文字コードを指定する XXXXX:before { content:'\E89E'; font-family: "Material Icons"; } こうすればよい。 contentには文字コードを入力する。文字コードの調べ方(旧バージョン) 表示したいアイコンの文字コードはすぐ分かるので、"&#x"を"\"にしてcontentに入れる。以上。文字コードの調べ方(2018年版) Materia...