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.

Screen Shot 2016-06-06 at 5.22.58 PM

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:

  1. li{
  2. list-style-type: circle;
  3. }

The above code should make your list look like this:

Screen Shot 2016-06-06 at 5.23.09 PM

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:

  1. li{
  2. list-style-type: none;
  3. }
  5. li:before{
  6. content: "\f0e7";
  7. font-family: "FontAwesome";
  8. width: 10px;
  9. height: 10px;
  10. }

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

Screen Shot 2016-06-06 at 5.40.05 PM

Share and Enjoy !

0 0