Home | Computers | Codes & Signals | DIY | Marginal Science | Security & Safety | Society | Miscellaneous        stolons: Worklooker | Monkeydoit | JobSpector

How to Add Cool Website Bullets and Arrows on a Web Page

Cool Website Bullets

The following describes how 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 all the time both 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 and arrows 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 lets 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 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.

Adding Cool Custom Images as Website Bullets

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, bar codes, 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, bar codes, and skull bullets

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

free website bullets

HTML ASCII Bullets and Arrows

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:


Output HTML Name


Output HTML Name
» &raquo;
> &gt;


Output HTML Name
¤ &curren;
Ξ &Xi;
Δ &Delta;
× &times;