HTML5 & CSS

Submitted by nvovn on Sat, 08/19/2017 - 05:15

Icons and list-style-type

Here is my take on icons as list bullets:

  1. Include an icon set (e.g. font-awesome)
  2. Set list-style-type to none
  3. set a negativ margin to the list item, and
  4. size the icon appropriately. 
  5. Use the icon in the list
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  ul { list-style-type: none; }
  i.lili { margin-left: -20px; font-size: 0.8em; }
</style>
...
<ul>
    <li><i class="fa fa-bars lili"></i> Stet clita kasd gubergren</li>
</ul>
Tags