{"id":1936,"date":"2016-06-06T21:34:43","date_gmt":"2016-06-06T21:34:43","guid":{"rendered":"http:\/\/cssreset.com\/?p=1936"},"modified":"2016-06-06T21:34:43","modified_gmt":"2016-06-06T21:34:43","slug":"styling-lists-with-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/styling-lists-with-css\/","title":{"rendered":"Styling Lists with CSS"},"content":{"rendered":"

By default, each list item in any unordered list will be preceded by a standard round bullet point, like in the example below.<\/p>\n

\"Screen<\/p>\n

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.<\/p>\n

To apply these different list-item markers to your lists, you need to use CSS similar to this:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. li{<\/span><\/div><\/li>\n
  2. list-style-type<\/span>:<\/span> circle<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    The above code should make your list look like this:<\/p>\n

    \"Screen<\/p>\n

    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!)\u00a0.<\/p>\n

    Here’s an example of what the code for that hack might look like:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. li{<\/span><\/div><\/li>\n
    2. list-style-type<\/span>:<\/span> none<\/span>;<\/span><\/div><\/li>\n
    3. }<\/span><\/div><\/li>\n
    4.  <\/div><\/li>\n
    5. li:before<\/span>{<\/span><\/div><\/li>\n
    6. content<\/span>:<\/span> "\\f0e7<\/span>"<\/span>;<\/span><\/div><\/li>\n
    7. font-family<\/span>:<\/span> "FontAwesome"<\/span>;<\/span><\/div><\/li>\n
    8. width<\/span>:<\/span> 10px<\/span>;<\/span><\/div><\/li>\n
    9. height<\/span>:<\/span> 10px<\/span>;<\/span><\/div><\/li>\n
    10. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      The above code gives your list items a very cool lightning bolt marker. Check it out:<\/p>\n

      \"Screen<\/p>\n

      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

      By default, each list item in any unordered list will be preceded by a standard round bullet point, like in the example below.<\/p>\n

      \n

      If round bullet points aren’t your style, CSS gives us a few different list-item marker options […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":1939,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10,42],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1936"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1936"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1936\/revisions"}],"predecessor-version":[{"id":1940,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1936\/revisions\/1940"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/1939"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}