Styling Lists with CSS

By default, each list item in any unordered list will be preceded by a standard round bullet point, like in the example below.

If round bullet points aren’t your style, CSS gives us a few different list-item marker options to use instead. The default bullet point is called a disc, but some other list-item markers that can be used are circle, square, upper roman and lower roman (roman numbers in uppercase and lower case, respectively), in addition to numbering in many different languages/alphabets.

To apply these different list-item markers to your lists, you need to use CSS similar to this:

The above code should make your list look like this:

If you’re not happy with any of the CSS list-item marker options, there is a hack that can be applied to use any image or FontAwesome icon as your list-item marker. Set the list-style-type display to none, and then apply :before to your li selector. Using :before, you can define the content property as the path to the image file, or the unicode value (don’t forget to define the font-family if you’re using FontAwesome!) .

Here’s an example of what the code for that hack might look like:

The above code gives your list items a very cool lightning bolt marker. Check it out: