I'm using FA and :before to use icons instead of bullets.
Some unicode characters work, and some don't. For example, f004 (heart), f005 (star), and f2dc (snowflake) work. But f001 (music), f008 (film), and f046 (check) don't work.
I'm using FA 5.0.6 Free.
@font-face {
font-family: 'awe506';
src: url("../fontawesome506/fa-regular-400.eot");
src: url("../fontawesome506/fa-regular-400.eot?#iefix") format("embedded-opentype"),
url("../fontawesome506/fa-regular-400.woff2") format("woff2"),
url("../fontawesome506/fa-regular-400.woff") format("woff"),
url("../fontawesome506/fa-regular-400.ttf") format("truetype"),
url("../fontawesome506/fa-regular-400.svg#fontawesome") format("svg");
}
.bulletsamples ul {
list-style-type: none;
padding-left: 0;
margin-left: 2em;
}
.bulletsamples li {
position: relative;
padding-left: 2em;
margin-bottom: 10px;
}
.bulletsamples li:before {
position: absolute;
top: 0;
left: 0;
font-family: awe506;
font-weight: 400;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.stars li:before {
content: "\f005"; /*THIS WORKS*/
color: blue;
}
.stars li:before {
content: "\f008"; /*THIS DOESN'T WORK*/
color: blue;
}
No - I don't have two .stars li:before rules in my CSS - I've added this for illustration.
On the FA website (https://fontawesome.com/icons?d=listing&m=free) I filtered the list to only show icons included in the free set.
Also - the icons are hollow - I followed the instructions on FA's site and set font-weight to 900 for solid icons and it made no difference.
Thanks in advance - Cath