テキストや文章、タイトルの先頭に画像を挿入する方法

よくタイトルやリストの先頭に画像を配置したいことがあります。

使い勝手も良いのでメモしておきます。

意外とbackground-imageで記述すると便利

リストの先頭（リストアイテム）を画像にしたり、メインのタイトルなどの先頭にアイコンを配置したり…。

使い勝手が良いのですが単純にimgで先頭に挿入するとレスポンシブに対応出来なかったりスタイルが崩れてしまいます。

そこでbackground-imageとして背景扱いにすると意外とハマります。

シンプルな記述で使いやすい

とてもシンプルなのでコードを見ればわかると思います。

<h1 class="title">先頭にアイコンをつけたいタイトルテキスト</h1>

.title {
  padding: 0 0 0 40px;
  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: 0 5px;
  background-size: 22px;
}

paddingでアイコンとテキストの位置関係

background-positionでアイコンの位置

background-sizeでアイコンのサイズを変更できます。

リストなどに使うと個性的なリストを作ることも出来るので使い勝手がいいです。