isotropic-2022
Share
Blog
Search
Menu

How To Set Custom Bullets In UL/ Lists

By James LePage
 on January 4, 2021
Last modified on January 7th, 2022

How To Set Custom Bullets In UL/ Lists

By James LePage
 on January 4, 2021
Last modified on January 7th, 2022

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>
Code language: HTML, XML (xml)

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; }
Code language: PHP (php)

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:

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Greg Thompson
Greg Thompson
4 months ago

in your css code can I enter a url to define a bullet?

and thanks for the video............

Last edited 4 months ago by Greg Thompson
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram