Fixing Font Awesome in Hestia

I use the Hestia theme for this site which I think looks pretty good. One problem with it however is that uses v4 syntax for Font Awesome icons but includes v5 of Font Awesome in its assets. The change from v4 to v5 of Font Awesome was quite a large one and there’s a lot of icons whose names have changed such as the reply icon used for site comments, this used to be fa-mail-reply but is now fa-reply so the icon just shows up as an unknown square rather than the correct arrow icon.

There is a shim CSS file provided by Font Awesome to get around this problem and remap the old to the new names but this doesn’t seem to be included in Hestia for some reason. In order to add this in the following code needs to be added to the functions.php file in order to add the CSS link to the site head.

function my_style_sheets() {
	wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.7.2/css/all.css' );
	wp_enqueue_style( 'font-awesome-shim', 'https://use.fontawesome.com/releases/v5.7.2/css/v4-shims.css' );
}
add_action( 'wp_enqueue_scripts', 'my_style_sheets' );

I add the Font Awesome CSS as well even though it is already added desperately by Hestia as this ensures that the shim file is added afterwards.

The functions.php file can be modified using the My Custom Functions plugin which means you don’t have to worry about theme updates overwriting your modified functions.php file.

If you’re using the search widget on your site you’ll also need to update the CSS to have the search icon display correctly. This is displayed as a font character using a pseudo element but this is done using the method for v4 of Font Awesome, not v5 which has a different font-family and requires a font-weight attribute to be set.

The following code should be added to the additional CSS section of your site.

.searchform:not(.media-toolbar-primary):after, .search-form:not(.media-toolbar-primary):after, .woocommerce-product-search:after {
    color: #fff;
    content: "\f002";
    font-family: Font Awesome\ 5 Free;
    pointer-events: none;
    position: absolute;
    right: 15px;
    top: 0;
    font-weight: 900;
}