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

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

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

参考サイト

blog.ttskch
 
fontawesomeのアイコンをcssの:before/:afterで挿入する
https://blog.ttskch.com/fontawesome-icon-css-before-after/
cssのcontentプロパティではHTMLを挿入することはできません。 /* できない */ h1:before { content:

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

imasashi.net
 
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...

関連記事

TOP