【CSS】擬似要素で画像・背景画像を入れる【表示されない場合】

コーディング
スポンサーリンク

擬似要素で画像を入れる

先日、fontawesomeのアイコンがSafariで表示されない不具合があり、苦戦しておりました・・・。

調べたところ不具合を解消する方法はあるようなのですが、情報が少なかったのと、色々試して時間を使うよりも
「fontawesomeは使わずにいっそ擬似要素で画像を表示させよう」という考えに至りました。

例えばテキストの直線に画像を入れて、アイコンを表示させたいと思います。
 

 

擬似要素で画像・背景画像を入れる方法

アイコンなど、表示させたい画像をダウンロードして用意しておきます。

・HTML

 

・CSS

 

コードの解説・注意点

backgroundで背景画像にしないと画像サイズの調節がうまくできないので、background-imageで画像を表示させます。
width、heightでサイズを指定。
displayでinline-blockにしないと、インラインのままでは表示されません。

あとはテキストとアイコンの高さを揃えるために、フレックスでセンターにしています。
 


 
以上です。簡単ですが意外と何も考えずにコードを書いていると、思った通りに表示されなくて「あれ!?」となります。

少しでも参考になれば幸いです。

コメント

タイトルとURLをコピーしました