Custom li list-style with font-awesome icon

Question

I am wondering if it's possible to utilize font-awesome (or any other iconic font) classes to create a custom <li> list-style-type?

I am currently using jQuery to do this, ie:

$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");

However, this doesn't style properly when the <li> text wraps across the page as it considers the icon to be part of the text, not the actual bullet-indicator.

Any tips?

Answer 1

ul li {
  list-style: none;
}
ul li::before {
  display: inline-block;
  content: "";
  background-image: url(image.png);
  width: 30px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
}

Answer 2

CSS Lists and Counters Module Level 3 introduces the ::marker pseudo-element. From what I've understood it would allow such a thing. Unfortunately, no browser seems to support it.

The following solution works with any type of icon font. But FontAwesome apparently provides its own way to accomplish this (I was unaware of it before writing my answer). Check out Darrrrrren's answer below for more details.

It works by adding some padding to the parent ul and pulling the icon into that padding:

ul {
  --icon-space: 1.3em;
  list-style: none;
  padding: 0;
}

li {
  padding-left: var(--icon-space);
}

li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: calc( var(--icon-space) * -1 );
  width: var(--icon-space);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Adjust the padding/font-size/etc to your liking, and that's it.

=====

Edit:

As of now the ::marker pseudo-element already has 90% support across browsers. Below is an implementation making using of it.

ul {
  --icon-size: .8em;
  --gutter: .5em;
  padding: 0 0 0 var(--icon-size);
}

ul li {
  padding-left: var(--gutter);
}

ul li::marker {
  content: "\f00a"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  font-size: var(--icon-size);
}

Answer 3

See reference : https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

Answer 4

This is my version: FontAwesome 5 ul

ul {
  list-style-position: inside;
  padding-left: 0;
}
ul li {
  list-style: none;
  position: relative;
  padding-left: 20px;
}
ul li::before {
  position: absolute;
  top: calc(50% - 4px); /* half font-size */
  left: 0px;
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-size: 8px;
  font-weight: 900;
}

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
  <li>Line 4</li>
  <li>Line 5</li>
</ul>

Answer 5

As per the Font Awesome Documentation:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Barbabella</li>
  <li><i class="fa-li fa fa-check"></i>Barbaletta</li>
  <li><i class="fa-li fa fa-check"></i>Barbalala</li>
</ul>

Or, using Jade:

ul.fa-ul
  li
    i.fa-li.fa.fa-check
    | Barbabella
  li
    i.fa-li.fa.fa-check
    | Barbaletta
  li
    i.fa-li.fa.fa-check
    | Barbalala

Answer 6

Now that the ::marker element is available in evergreen browsers, this is how you could use it, including using :hover to change the marker. As you can see, now you can use any Unicode character you want as a list item marker and even use custom counters.

@charset "UTF-8";
@counter-style fancy {
  system: fixed;
  symbols: 🙂 😀 😁;
  suffix: " ";
}

p {
  margin-left: 8em;
}

p.note {
  display: list-item;
  counter-increment: note-counter;
}

p.note::marker {
  content: "Note " counter(note-counter) ":";
}

ol {
  margin-left: 8em;
  padding-left: 0;
}

ol li {
  list-style-type: lower-roman;
}

ol li::marker {
  color: blue;
  font-weight: bold;
}

ul {
  margin-left: 8em;
  padding-left: 0;
}

ul.happy li::marker {
  content: "🙂";
}

ul.happy li:hover {
  color: blue;
}

ul.happy li:hover::marker {
  content: "😐";
}

ul.fancy {
  list-style: fancy;
}

<p>This is the first paragraph in this document.</p>
<p class="note">This is a very short document.</p>
<ol>
  <li>This is the first item.
    <li>This is the second item.
      <li>This is the third item.
</ol>
<p>This is the end.</p>

<ul class="happy">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="fancy">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Answer 7

I did two things inspired by @OscarJovanny comment, with some hacks.

Step 1:

• Download icons file as svg from Here, as I only need only this icon from font awesome

Step 2:

<style>
ul {
    list-style-type: none;
    margin-left: 10px;
}

ul li {
    margin-bottom: 12px;
    margin-left: -10px;
    display: flex;
    align-items: center;
}

ul li::before {
    color: transparent;
    font-size: 1px;
    content: " ";
    margin-left: -1.3em;
    margin-right: 15px;
    padding: 10px;
    background-color: orange;
    -webkit-mask-image: url("./assets/img/check-circle-solid.svg");
    -webkit-mask-size: cover;
}
</style>

Results

Answer 8

I wanted to add to JOPLOmacedo's answer. His solution is my favourite, but I always had problem with indentation when the li had more than one line. It was fiddly to find the correct indentation with margins etc. But this might concern only me.

For me absolute positioning of the :before pseudo-element works best. I set padding-left on ul, negative position left on the :before element, same as ul's padding-left. To get the distance of the content from the :before element right I just set the padding-left on the li. Of course the li has to have position relative. For example

ul {
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  /* make space for li's :before */
  list-style: none;
}

li {
  position: relative;
  padding-left: 0.4em;
  /* text distance to icon */
}

li:before {
  font-family: 'my-icon-font';
  content: 'character-code-here';
  position: absolute;
  left: -1em;
  /* same as ul padding-left */
  top: 0.65em;
  /* depends on character, maybe use padding-top instead */
  /*  .... more styling, maybe set width etc ... */
}

Hopefully this is clear and has some value for someone else than me.

Answer 9

I did it like this:

li {
  list-style: none;
  background-image: url("./assets/img/control.svg");
  background-repeat: no-repeat;
  background-position: left center;
}

Or you can try this if you want to change the color:

li::before {
  content: "";
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 7px;

  background-color: orange;
  -webkit-mask-image: url("./assets/img/control.svg");
  -webkit-mask-size: cover;
}

Answer 10

I'd like to provide an alternate, easier solution that is specific to FontAwesome. If you're using a different iconic font, JOPLOmacedo's answer is still perfectly fine for use.

FontAwesome now handles list styles internally with CSS classes.

Here's the official example:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>