Both links and unordered lists can be classed to give them special bullets. Possible classes to use are: "popicon", "windowicon", "pdficon", "secureicon", and "feedicon".

Links:

Example: <a class="popicon" href="...">. Sample text: Aliquam Foo Bar pede eu arcu. Donec elementum tincidunt nisl. Foo Bar a ipsum et nisl ante vel enim condimentum porttitor. Nunc dictum Foo Bar mattis. Nulla in ante vel enim condimentum porttitor. volutpat. Nullam mattis velit id odio. Phasellus leo nibh, eleifend nec, tempor eget, Foo Bar malesuada, nisi. Foo Bar Sed nec turpis in malesuada, nisi. Foo Bar mauris sol lic Sed nec turpis in malesuada, nisi. Foo Bar mauris itudin.

Left Placement Example: <a class="iconleft popicon" href="...">. Sample text: Aliquam Foo Bar pede eu arcu. Donec elementum tincidunt nisl. Foo Bar a ipsum et nisl ante vel enim condimentum porttitor. Nunc dictum Foo Bar mattis. Nulla in ante vel enim condimentum porttitor. Nunc interdum elit non sem. Aenean varius varius neque. Foo Bar erat volutpat. Nullam mattis velit id odio. Phasellus leo nibh, Foo Bar nec, tempor eget, imperdiet malesuada, nisi. Sed nec ada, nisi. Foo Bar mauris sol lic Sed nec turpis in malesuada, nisi. Foo Bar mauris itudilicitudin.

Unordered Lists:

The <ul> tag must get the "icons" class: <ul class="icons">. Then the specific icon class can be given to the <ul> tag directly, to style the whole list, or to the individual <li> elements, to style individual items:

Code Example

<!-- style the entire list -->
<ul class="popicon icons">
<li><a href="{linkplaceholder}">Sample item</a></li>
<li><a href="{linkplaceholder}">Sample item</a></li>
</ul>

<!-- style items individually -->
<ul class="icons">
<li class="pdficon"><a href="{linkplaceholder}">Sample item</a></li>
<li class="popicon"><a href="{linkplaceholder}">Sample item</a></li>
</ul>