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:

STANDARD BULLET SHAPES

Output HTML Name
&bull;
&diams;
&loz;

ARROW BULLET SHAPES

Output HTML Name
» &raquo;
&rArr;
&rarr;
&rsaquo;
> &gt;

OTHER BULLETS

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