Bullet lists are a convenient way to organize information in a well-structured format. But the options square, circle and disc symbols can be boring and leave a lot to be desired in the way of design. This is especially true if your list will be displayed on the homepage or sidebar where you really want things to looks nice. This tutorial shows you how to change a boring list like this:

• Item one
• Item two
• Item three

Into something like this:

• Item one
• Item two
• Item three

Or this:

• Item one
• Item two
• Item three

The bottom two examples are achieved by adding ASCII special characters to the <ul> element in CSS. First you’ll need to add a class to the <ul> element like this:

<ul class="special_bullet">

This can be done by switching from the visual editor in WordPress to the text editor. Now you just need to add the CSS either in your style.css or if you are using Elegant Themes you can add it to the CSS box in the Epanel. This is what you’ll add:

ul.special_bullet {
list-style: none;
}

ul.special_bullet li:before {
color: #000;
content: "\27bd \0020";
}

The first style removes the bullet from the list. The second style adds a color value and the symbol. The first ASCII character \27bd creates the symbol. The \0020 adds a space after the symbol for separation. You could also add a font-size: 30px; for example to make the symbol larger.

For more symbols, check out this great website: https://websitebuilders.com/tools/html-codes/dingbats/. There are two codes given for each symbol on this site. You’ll want to use the bottom code. But you only use the four characters between the [x] and [;] . For example, the code given for the arrow in the example above is &#x27bd; but we can’t use that in CSS. Remove everything before and including the x and remove the ; and then add a \ in front to make it this: \27bd.

This is a quick and easy way to add a little flare to your bullet lists. Your options are a little limited but much better than the default square, circle and disc. If you can’t find a symbol that meets your needs, you could always use a custom image by adding this code to your CSS:

ul.special_bullet
list-style-image: url(‘image-name.gif’);
}

Just replace image-name.gif with an image of your choosing that you’ve uploaded to your site. You can find the URL of that image by going to Media in the WordPress Dashboard and clicking the Edit button of the image you want to use. In the upper right corner of the screen you’ll see the File URL. Copy and paste that between the single quotes in the example above. You’ll obviously want to use a relatively small image like 16 x 16 px.