こんな具合にメニュー項目の左側にアイコンをつけたい。なんて場合が多々ありますが、あとあとのメンテナンスのしやすさや、工数を削減するために、既存サイトのコンテンツを活用しながらデザインリニューアルするために、HTMLに image タグで配置するのではなく、スタイルシートに before 擬似要素として設定することが多いのです。

多いのですが、ちょうどよい位置決めの方法をいつも忘れます（笑）

覚えようという意志がないのだと思うので、メモしておくことにしました。

li a{
	position:relative;
	line-height:1em;
	text-indent:1em;
}
li a:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	background:url(icon.png) no-repeat;
	background-size:contain;
}

「line-height」「text-indent」の値を変えることで微調整してます。