<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
ul {
list-style: none;
}
ul li::before {
content: "";
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fb-heart.gif);
background-size: contain;
display: inline-block;
width: 1em;
height: 1em;
position: relative;
top: 0.1rem;
margin-right: 0.2rem;
}
/*
You can't control the size with list-style-image
ul.list-style {
list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fb-heart.gif);
}
*/
/*
If you use the image directly as pseudo element, you can't size it:
ul li::before {
content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fb-heart.gif);
display: inline-block;
width: 20px;
height: 20px;
}
/
This Pen doesn't use any external JavaScript resources.