1

This is making me crazy.

I'm using Font Awesome 5 Free in custom list styles using :before and content:

In every instance, far icons are working and fas icons are not.

I've checked everything I know to no avail - any help would be greatly appreciated!

PHP

Confirmed I'm using the latest version:
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

function smart_grid_scripts() {
    wp_enqueue_style('fontawesome','//use.fontawesome.com/releases/v5.1.1/css/all.css', false);
}
add_action( 'wp_enqueue_scripts', 'smart_grid_scripts' );

SCSS

Confirmed I'm using the right content. And have font-weight set per documentation.

// far fa-calendar-alt
li.smart-date:before {
    font-family: 'Font Awesome 5 Free'; 
    content: '\f073';
} 
// fas fa-link
li.smart-link:before {
    font-family: 'Font Awesome 5 Free'; 
    content: '\f0c1';
    font-weight: 900;
}

HTML

Confirmed no typos, etc. in my classes.

<ul class="smart-list">
    <li class="smart-date">far fa-calendar-alt NOT working</li>
    <li class="smart-link">fas fa-link WORKING</li>
</ul>

closed as off-topic by Tom J Nowell Jul 24 '18 at 2:12

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • This looks like a pure HTML/CSS issue, you should consult the fontawesome docs, if far icons are working then clearly the CSS is loading, and the WP side of things has been done and completed. It is not a WP problem, and WP knowledge will not be helpful to your problem. – Tom J Nowell Jul 24 '18 at 2:13
  • the only difference I can see between them is that in the working one you state: font-weight: 900; just a try.. – Andrea Somovigo Jul 24 '18 at 6:40