Replace bullets of a list by pdf icons

Posted by gerdami on 10 Sep 2009 22:11, last edited by gerdami on 30 May 2010 07:01

Tags: bullets icons list pdf

rating: +6+x

This is a list of attachments

  • first pdf
    • second but indented pdf
    • third
  • first excel
  • second
    • third but indented excel
  • fourth
  • first word
  • second
    • third but indented word
  • fourth

which is rendered by

[[div class="list-pdf"]]
* first pdf
 * second but indented pdf
 * third
[[/div]]
[[div class="list-excel"]]
* first excel
* second
 * third but indented excel
* fourth
[[/div]] 
[[div class="list-word"]]
* first word
* second
 * third but indented word
* fourth
[[/div]]

after having added the following code to the CSS …

div.list-pdf ul{
  list-style-image: url(/local--files/system:icons/pdf.gif);
}
div.list-excel ul{
  list-style-image: url(/local--files/system:icons/excel.gif);
}
div.list-word ul{
  list-style-image: url(/local--files/system:icons/word.gif);
}

and uploaded the gifs on page system:icons

Notes

  • the examples shown on this page actually use the CSS module
  • icons are attached to this page; however, you should store your icons on a reusable and dedicated page
  • there are other ways to iconize links

Author

gerdamigerdami. Please visit his/her userPage.

Discuss this

The techniques described in the following website

http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
http://pooliestudios.com/projects/iconize/

explain that it is possible to recognise a link and append / prepend the link with the related icon.

Question: how can we use these techniques to replace a bulleted list by an iconised list ?

Other(!) HowTos posted by gerdami

Page tags: bullets icons list pdf
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.