CSS liタグにアイコンを付けるには?

ショコラ
ショコラ

CSS liタグにアイコンを付けるには?

liタグにアイコンを付けるポイントです。

①ulタグ は list-style:none でアイコンを消す。padding-left を消す。
liタグは position:relative に設定する。アイコン分の padding-left を入れる。
imgタグのアイコンは position:absolute に設定する。アイコンの位置を調整する。

もっさん先輩
もっさん先輩
<html>
<body>

<ul style="list-style:none; padding-left:0;">
  <li style="position:relative; padding-left:25px; font-weight:bold;">
    <img src="icon.svg" style="position:absolute; top:1px; left:2px; width:20px; height:20px; ">
    ラベル
  </li>
  <li style="position:relative; padding-left:25px; font-weight:bold;">
    <img src="icon.svg" style="position:absolute; top:1px; left:2px; width:20px; height:20px; ">
    ラベル
  </li>
</ul>

</body>
</html>

以上

Scroll to Top