I prefer this method because it gives me more control over bullet position.
0 1 2 3 4 5 6 7 | <ul class="pdf-list"> <li><a href="http://address.pdf">Title</a></li> <li><a href="http://address.pdf">Title</a></li> <li><a href="http://address.pdf">Title</a></li> <li><a href="http://address.pdf">Title</a></li> </ul> |
and the css (adjust padding based on the size of the image):
0 1 2 3 4 5 6 | ul.pdf-list li { background: url('../images/pdf-icon.png') no-repeat left center; padding: 3px 0px 3px 30px; list-style: none; } |
In this case I used this image (your url path in line 2 above will depend on your site structure):
or use bootstrap:
http://fortawesome.github.io/Font-Awesome/icons/
0 1 2 3 4 5 6 7 | <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-file-pdf-o"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li> </ul> |