[css] Custom li list-style with font-awesome icon

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

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to html-lists

How to markdown nested list items in Bitbucket? how do I get the bullet points of a <ul> to center with the text? Is there a way to make numbers in an ordered list bold? How to center an unordered list? How do I set vertical space between list items? Removing "bullets" from unordered list <ul> jQuery load first 3 elements, click "load more" to display next 5 elements How can I disable a specific LI element inside a UL? UL has margin on the left How to display an unordered list in two columns?

Examples related to font-awesome

Search input with an icon Bootstrap 4 Add tooltip to font awesome icon Font awesome is not showing icon Want to make Font Awesome icons clickable Change color when hover a font awesome icon? Is it possible to make Font Awesome icons larger than 'fa-5x'? FontAwesome icons not showing. Why? How to include a Font Awesome icon in React's render() Statically rotate font-awesome icons How to vertically align text with icon font?