Textpattern tips, tutorials and code snippets

Assign an icon to your navigation links

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.

1 Comment Comment feed

Nice. The CSS background method is excellent. So simple it hurts…makes me mad I didn’t think of it. :)

Add a comment

Use Textile help to style your comments