HTML&CSS WEBデザイン WORDPRESS

(2024年)FontAwesomeを背景に使用する方法【WordPress】

FontAwesomeを背景で使用する方法

まずCDNを<header>~<header>の間に読み込みます。WordPressはheader.phpにコピペします。

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">

(2022年7月現在のバージョン)最新バージョンはこちらから確認

FontAwesomeを背景として使用する場合、::before, ::afterなどの疑似要素を指定して使用していきます。

See the Pen Untitled by Satomi (@satomi79000033) on CodePen.

uniコード(f105)の前に \ が必ず必要です!【content:"\f150";】となります。
font-weight: 900;を必ず入れないといけなくなりましたので注意が必要です!

ちなみに有料の方はこちらを使います。↓

font-family: 'Font Awesome 5 Brands';/*有料のタイプ

-HTML&CSS, WEBデザイン, WORDPRESS