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:
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:
<—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’);”>
Here is a sampling below of cool website bullets that are free for download.
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
ARROW BULLET SHAPES