Niekedy je dobrý nápad zakomponovať ikonky pri odkazoch cez CSS background, namiesto kombinácie <img> a <a>. Menej písania, menej html elementov, je to kompaktnejšie a pre prípadnú zmenu dizajnu netreba loziť do html.

---

ikonka cez obrázok: awesome comments

<a href="#">
  <img src="comments.png" alt="comments" style="vertical-align: middle; border: 0;"> 
  awesome comments
</a>

V niektorých browseroch podčiarknutie textu zasahuje do samotného obrázku. Vybrať <img> von z <a> by to síce vyriešilo, potom by ale kliknutie na obrázok nefungovalo ako link. Fix:

---

ikonka cez css: really awesome comments

<a href="#" style="padding-left: 21px; background: url('comments.png') 0px 2px no-repeat;">
  really awesome comments
</a>

Wheee:)

padding-left: 21px je tu potrebný, aby obrázok neprekrýval text - vyhradíme mu 21px na ľavej strane, v nich sa môže realizovať a text nechá na pokoji.