Customize Unordered List Items Into Custom Bullets

by Josh Koop | Last Updated:  August 22, 2020
Apply to Ezoic Surfer SEO 7 Day Trial Brave Browser
Pro Blogger Income is owned and operated by ProBloggerIncome.com. Pro Blogger Income is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com. Pro Blogger Income also participates in affiliate programs with Avantlink, Clickbank, CJ, ShareASale, and other sites. Pro Blogger Income is compensated for referring traffic and business to these companies.

Tags:

Many times people want to have something more fancy for a unordered list than just the default dot. This doubly will go for any blogger looking to do a pro and cons list, you know with a check or an x as to features.

Well luckily this is pretty simple if you stick to dingbats as a character as they exist almost everywhere and on every machine so you don’t have to worry about the users not having them and not loading will keep your site fast.

This can easily be accomplished by building some Custom CSS around a class you choose to assign to the list. in the example below the class name is “my_bullet” to keep it simple and to the point.

Typical Unordered List

.my_bullet li {
   margin-bottom: 0px;
}

.my_bullet li:before {
    content: "\2714";
    color: #F0533A;
    font-size: 25px;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    list-style: none;
}

ul.my_bullet {
    list-style: none;
}

Example Unordered List Using My_Bullet Class

The below shows you how simple using just the Custom CSS above looks and can give you an idea of what you can accomplish if you want to give it a try on your site for the next time you need a customized list, skip the plugin.

Dingbats Examples (Numbers)

All of the following could be used to generate unique lists where you choose the 4 digit number to use in the above example. The list below can help you take a look and maybe try some out to see which ones can work well for you.

https://www.compart.com/en/unicode/block/U+2700

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!