How To Set Custom Bullets In UL/ Lists

Published: 3 weeks ago

Standard HTML lists look boring. In this article we are going to discuss how to replace that basic bullet point with any icon you desire.

  • This method will use CSS
  • And replace that bullet to the left
  • With whatever you want
  • And it's decently easy to do!

This is a relatively simple tutorial, and even though we are going to use some mildly advanced CSS techniques, all you need to do is copy and paste the code, and change just a few lines. It also uses the standard UL LI HTML structure, instead of using DIVs, so it's much cleaner. Let's get right into how to change the standard bullet on an HTML list with CSS, and nothing more.

  • This will be the final product
  • Using only CSS
  • We can make the bullet whatever we want
For the reminder of this tutorial, we'll focus on making the standard list bullet into a checkmark symbol (). Keep in mind, you can change it to whatever you want, and we'll show you how to do that as well.

First, build out your list using HTML. Here's what that typically looks like.

<div id=newlist><ul>
<li>This will be the final product</li>
<li>Using only CSS</li>
<li class=othercheck>We can make the bullet whatever we want</li>
</ul></div>

Notice that we're wrapping the whole thing with a div with a unique id. This is only needed if you want to change the bulletpoints on specific lists. You may also notice that the last bullet has a custom class. This is done if you want an individual bullet to have a custom symbol.

Then, we're going to change the bullets into checkmarks (or anything else you want). This is done through css. First, we hide the bullets, then we reinsert a custom one using the CSS:Before pseudo element.

#newlist ul {
  list-style: none;
}
//* standard Unicode method *//

#newlist ul li:before {
content: "\2713";
color:#3740ff;
padding-right:5px;
}

//* if you use FA5 *//
#newlist ul li:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900;
content: "\f14a";
color:#3740ff;
padding-right:5px;
}

#newlist .othercheck:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900;
content: "\f4da";
color:#3740ff;
padding-right:5px;
}

There are a few things to note here. First, there are two methodes. One uses a unicode checks, and one uses Font Awesome checks. Standard Unicode, which looks like this in css \2713 and this in html ✓ is safe and will work on any device.

FontAwesome also uses unicode, but needs to be included on the site as it's essentially a 3rd party font. That's done through a <link> tag, or by font-face and self hosting (how to install FA5 on any site). But, with it comes a huge selection of icons, as pictured below:

  • This will be the final product
  • Using only CSS
  • We can make the bullet whatever we want

However you do it, using unicode and css :before to replace list bullets with whatever you want is a great way to spruce things up, and is pretty easy to get done as well. Be sure to include the padding, and specify the color!

Further reading:

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.
rocket.net

Author

  • James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram