How to Add Cool Website Bullets on a Web Page


Cool Website Bullets

It’s really easy to add cool website bullets and arrows to a web page. Bullets are great for adding emphasis to blocks of text and can really draw the reader’s attention to important information. I use bullets frequently in my Word documents and on live web pages. I think you’ll find some of the following tips useful for how to add bullets to your website through HTML, HTML ASCII code, and image bullets applied through CSS or in tables.

Adding normal HTML website bullets with <UL> and <LI>

First, let’s start with the typical HTML website bulleted lists (called Unordered lists) you see most often on web pages. These instructions below tell you how to add an unordered list.

In your HTML document inside the <body> source code create the following with <ul> and <li> tags:

HTML Unordered List

This will create the simplest bulleted list with solid circle-shaped bullets. If you want square bullets then change your opening <ul> tag as follows:

<ul style=”list-style-type:square;”>

<—as you see this style creates square-shaped bullets

List style types include square, disc, circle, and none. List style type circle adds a hollow circle in contrast to the solid circle when there is no style added.


Using cool custom images as website bullets using CSS list style

Adding cool custom images as website bullets is very easy by applying the list-style-image as shown below. Included are arrow bullets, primitive bullets, space invaders, particle bullets, barcodes, and skull bullets.

<ul style=”list-style-image: url(‘yourimage.gif’);”>

Adding Cool Custom Images as Website Bullets: arrow bullets, primitive bullets, space invaders, particle bullets, barcodes, and skull bullets

Here is a sampling below of cool website bullets that are free for download.

free website bullets

More Free Icons Get more cool bullets

Cool HTML ASCII bullets

You can also use certain ASCII code for bullets or arrows and place them in front of text. Here are a few that I have used:

STANDARD BULLET SHAPES

OutputHTML Name
&bull;
&diams;
&loz;

ARROW BULLET SHAPES

OutputHTML Name
»&raquo;
&rArr;
&rarr;
&rsaquo;
>&gt;

OTHER BULLETS

OutputHTML Name
¤&curren;
&there4;
Ξ&Xi;
&hearts;
Δ&Delta;
&oplus;
×&times;
&otimes;
&asymp;
&radic;
&infin;
&lowast;
&dagger;