Here are a couple of ways to assign an icon to your navigation links, in this example using section links. The same method could also be used for category lists.
Using li items
<txp:section_list break="" wraptag="ul" default_title="Home" sections="section1,section2,section3" include_default="1">
<li><img src="/images/<txp:section />.png" /><txp:section title="1" link="1" /></li>
</txp:section_list>
For this first method, you will need to name your .jpg or .png images according to your section name.
Using background image and CSS
<txp:section_list break="" wraptag="ul" default_title="Home" sections="section1,section2,section3" include_default="1">
<li class="img-<txp:section />"><txp:section title="1" link="1" /></li>
</txp:section_list>
This method sets a class for your li
item so that you can then style like so: li.img-section1, li.img-section2
, etcetera.
Nice. The CSS background method is excellent. So simple it hurts…makes me mad I didn’t think of it. :)