3

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

0

1 Answer 1

Reset to default
3

Doesn't look like u+f008 has a glyph in that font/version; it is simply not present.

According to https://fontawesome.com/icons?d=gallery&q=film you would need to use the solid version instead of the regular one (which is "Pro" only). This goes for u+f001 as well. u+f046 has apparently been moved at some point to u+f14a.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
@font-face {
    font-family: awe506;
    src: url(fa-solid-900.woff);
}
.stars {
    font-family: awe506;
}
.stars li:before {
    /*content: '';*/
    content: '\f005';
    color: blue;
}
.stars li:after {
    /*content: '';*/
    content: '\f008';
    color: blue;
}
        </style>
    </head>
    <body>
        <ul class="stars">
            <li>foo</li>
            <li>bar</li>
        </ul>
    </body>
</html>
3
  • Thanks for the suggestion, Jan, but f008 gives the same result.
    – Cath Gillespie
    Commented Feb 18, 2018 at 2:52
  • @CathGillespie You've got to use the 'solid' version, as in the example code provided.
    – Jan Kyu Peblik
    Commented Feb 18, 2018 at 6:07
  • THANK YOU! I didn't notice the change to the font file name - my apologies
    – Cath Gillespie
    Commented Feb 18, 2018 at 10:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.