ケケンタFont Awesomeって簡単にアイコンを挿入できて便利だけど、背景画像として使う方法って無いのかな……？
今回はこのようなお悩みにお答えします。
Font Awesomeを背景画像として使用する方法
＼Web制作を仕事にしたいなら／
こちらの記事で
Web制作コース独学プラン
についてご紹介しています。
￣￣￣
日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる
最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る
※ご注文の時間帯やお住まいの地域によります。
Amazonプライムの無料体験は「何度でも」利用可能
Amazonプライムの無料体験を何度も利用する方法
- Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
- 会員の自動更新を解除しておく＝期限が来たら自動解約
- １～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される
ケケンタ僕自身、過去に少なくとも３回は無料体験を利用しています。
※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。
Font Awesomeとは？
そもそもFont Awesomeとは？について解説をします。
Font Awesomeとは、Web上から好きなアイコン（Webアイコン）を簡単にWebサイトに挿入することができるサービスです。
使い方はいたってシンプルです。
Font Awesomeの基本的な使用方法
以下のコードをheadタグに記述します。
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
アイコンをクリックすると表示されるHTMLコードを任意の箇所に記述します。
実際の使用例
See the Pen fontawesome（背景画像） by ケケンタ (@lgshifbg-the-looper) on CodePen.
ケケンタこのように使用することで、簡単にWebサイトに好きなアイコンを挿入することができ、Font Awesomeは非常に便利です。
Font Awesomeを背景画像として使用する方法
それでは本題の「Font Awesomeを背景画像として使用する方法」についてですが、こちらは基本的な使用方法とは少しやり方が変わってきます。
Font Awesomeを背景画像として使用する方法
.sample::before{
content:"\文字コード";
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
実際の使用例
See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.
① 疑似要素を用意する
② 以下の３行を疑似要素に記述する
- content:”\文字コード”; ※「『\』はバックスラッシュです」
- font-family: “Font Awesome 6 Free”;
- font-weight: 900;
ケケンタこのように使用することでFont Awesomeを背景画像として設定することが可能です。
まとめ
以上が、Font Awesomeを背景画像として設定する方法でした。
Font AwesomeはそのままHTMLに記述することも可能ですが、疑似要素を用意することで背景画像として利用することも可能です。
そうするメリットとしては
- HTMLの構造を変えずに済む
- SEO的にHTMLとして認識させる必要がないアイコンを設定できる
といったことが挙げられます。
ケケンタそれでは、最後までご覧いただきありがとうございました！
コメント