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!


Confirmed I'm using the latest version:

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' );


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;


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>
  • 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