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

list-style-type?

I am currentl

Answer 1

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;
}