Graphic Bullets Instead Of List Bullets In HTML

In this article I will tell you the way of replacing standard HTML list bullets with images
  • 4071

Introduction

In this article I will tell you the way of replacing standard HTML list bullets with images. You can use images to replace the standard text bullets by using "Definition List".

Before showing you how to use images instead of bullets. I will add that there are some other shapes you can use in place of bullets Example Circle, Disc and other formats. Like this:

<!DOCTYPE html>

<html>

<head>

<style>

ul.circle {list-style-type:circle;}

ul.square {list-style-type:square;}

 

ol.lower-alpha {list-style-type:lower-alpha;}

</style>

</head>

<body>

<p>Example of unordered lists:</p>

<ul class="circle">

  <li>CSS</li>

  <li>HTML</li>

  <li>ASP.NET</li>

</ul>

<ul class="square">

  <li>CSS</li>

  <li>HTML</li>

  <li>ASP.NET</li>

</ul>

<p>Example of ordered lists:</p>

<ol class="lower-alpha">

  <li>CSS</li>

  <li>HTML</li>

  <li>ASP.NET</li>

</ol>

</body>

</html>

Output:

GraphicBullet01.jpg

Here's an example of a bullet list that uses a pretty image as the bullet:

<!DOCTYPE html>

<html>

<head>

<style>

ul.circle {list-style-type:circle;}

ul.square {list-style-type:square;}

 

ol.lower-alpha {list-style-type:lower-alpha;}

</style>

</head>

<body>

 <DL>

<DD><IMG SRC="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRiChGD7gow2lPHz7YAs8V9CB2B56xpAU9Lt06ZeL1nLJN9WJw2">List Item One</DD>

<DD><IMG SRC="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRiChGD7gow2lPHz7YAs8V9CB2B56xpAU9Lt06ZeL1nLJN9WJw2">List Item Two</DD>

<DD><IMG SRC="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRiChGD7gow2lPHz7YAs8V9CB2B56xpAU9Lt06ZeL1nLJN9WJw2">List Item Three</DD>

<DD><IMG SRC="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRiChGD7gow2lPHz7YAs8V9CB2B56xpAU9Lt06ZeL1nLJN9WJw2">List Item Four</DD>

</DL>

</body>

</html>

Output:

 GraphicBullet02.jpg

© 2020 DotNetHeaven. All rights reserved.