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:
- list-style-type: circle;
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:
- list-style-type: none;
- content: "\f0e7";
- font-family: "FontAwesome";
- width: 10px;
- height: 10px;
The above code gives your list items a very cool lightning bolt marker. Check it out: