เปลี่ยน icon list ด้วย css

เวลาเราทำ bullet โดยใช้ HTML เป็นอะไรที่เชยๆ คือเป็นวงกลม หรือไม่ก็สี่เหลี่ยม แต่ด้วย CSS เราสามารถเปลี่ยน bullet ให้เป็น icon list แทน


*/Code CSS*/

.iconlist
{
list-style: none;
margin: 0;
padding: 0;
}

li.pdf
{
background-image: url(bullet_pdf.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.doc
{
background-image: url(bullet_doc.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.text
{
background-image: url(bullet_text.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.htm
{
background-image: url(bullet_htm.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

Code HTML

<ul class="iconlist">
   <li class="pdf"><a href="#">สุภัทรชัย</a></li>
   <li class="text"><a href="#">คอมพิวเตอร์</a></li>
   <li class="htm"><a href="#">มหาวิทยาลัย</a></li>
   <li class="doc"><a href="#">อุบลราชธานี</a></li>
   <li class="text"><a href="#">จาวา</a></li>
</ul>