今回は、擬似要素で画像やアイコン（ Font Awesome）を表示する方法をご紹介します。
タイトルの装飾やアクセントをつけるときに画像を使用するときがあります。
imgタグを書いて、インラインブロックにするのかな・・・。
と悩む方もいると思いますが、擬似要素で画像を表示できるので、ぱぱっと理解ちゃいましょう。
コード
画像を表示
【HTML】
<h1 class="title">タイトル</h1>
【CSS】
.title::after{
content: url("ファイルパス");
vertical-align: middle;
display: inline-block;
}
これで、タイトルの後ろに画像が表示されます。
画像の大きさを調整しないケースはこれでＯＫです。
画像の大きさを調整する場合
画像の大きさを変更する場合は、下記のとおりです。
【CSS】
.title::after{
content: " ";
background-image: url(ファイルパス);
background-size: contain;
vertical-align: middle;
display: inline-block;
width: XX;
height:XX;
}
background-image で画像を設定しましょう。
そして大きさはwidth と height で調整できます。
Font Awesomeを表示
【HTML】
<h1 class="title">タイトル</h1>
【CSS】
.title::after{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
ポイント
Free
font-family:"Font Awesome 5 Free"; の「Free」は忘れずに記載しましょう。
ちなみに、現在最新バージョンは6なので、font-family:"Font Awesome 6 Free"; としても表示されます。
weight
font-weight:900; も絶対必要です。
content
content: "\f007";の「f007」は下の画像の赤枠を参照してください。
表示されない場合
- <head>でFont Awesomeが読み込みされているか
- 「Free」のアイコンを選択しているか
- CSSで
font-weightの設定をしているか
確認してみましょう。
まとめ
いかがでしたでしょうか。
疑似要素に画像やアイコンを設定できますので、タイトルの装飾に使えます。
ポイントは3つです。
- 画像の大きさの調整が不要な場合はcontent に設定する。
- 画像の大きさを変える時は background-image に設定しましょう。
- アイコンが表示されない場合、前述した「表示されない場合」の章をもう一度確認してください。
疑似要素に関連する記事も紹介しておきます。
-
【CSS】擬似要素を文字とかさねてオシャレな見出しをつくろう
続きを見る
それではまた次回お会いしましょう。