We help IT Professionals succeed at work.

Upgrade Font Awesome in WP

APD Toronto
APD Toronto asked
on
Hi Experts,

In my WP, I have a custom theme, and to load FA 4.7.0 I start off as :

<!DOCTYPE html>
<?php
    $theme_url = get_theme_file_uri();
    $main_url = get_home_url();
?>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <link rel="stylesheet" id="mpc-style-css" 
              href="<?php echo $theme_url; ?>/style.css" type="text/css" media="all">
        
        <style>
            /* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  
  src: url('<?php echo $theme_url; ?>/fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('<?php echo $theme_url; ?>/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
       url('<?php echo $theme_url; ?>/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
       url('<?php echo $theme_url; ?>/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
       url('<?php echo $theme_url; ?>/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
       url('<?php echo $theme_url; ?>/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  
  font-weight: normal;
  font-style: normal;
}
        </style>
        
        <link rel="stylesheet" id="fa-css" 
              href="<?php echo $theme_url; ?>/font-awesome.css" type="text/css" media="all">
                
    </head>

Open in new window


Where, Lines 19-29 I moved from the original font-awesome.css just to get the path right.  This works, but as now I would like to use new icons, like fas fa-cross, I downloaded FA 5.12.0, but I don't know how to go about it and upgrade?

I see there more .css and font files, and the font-awesome.css file does not start with the src statements as the old one did.

Please note, I'm using a theme from scratch for very specific purposes, and don't want to get into why. I just need to upgrade FA

Thanks in advance.
Comment
Watch Question

Fractional CTO
Distinguished Expert 2019
Commented:
https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4 provides instructions.

This type work can be a bit complex to do correctly.

Since you have a custom theme, best you hire your theme developer back to do this work.

The... general steps are...

1) Nuke all Font Awesome files. All files. Every trace of Font Awesome.

2) Now upload all your new Font Awesome files, in your case V5.12.0, back in your theme assets location, where ever you had these.

3) No bump the version string from 4.7.0 to 5.12.0, which should be sufficient.

Note: There are so many other factors you'll have to consider here.

1) The most crucial will be the expires headers produced by Apache where your site runs.

2) Also, if you're actually serving versions strings or now. Many brain-dead site performance boosting plugins strip versions strings, which breaks all sorts of things.

3) If you have problems actually seeing new files (old files cached somehow)...

Do not, under any circumstance clear your cache. If you clear your cache you will fix your problem + leave the problem in play for every single person who has ever visited your site before.

If you have a problem, debug + define the problem clearly, then determine the fix...

Well... I guess you'll only do this if this is a money site (traffic flowing + money must remain flowing).

If this is unimportant, you can just clear your cache, if old files continue showing up in your browser.

4) Big Tip: Be sure you take a backup before you start this work.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
The previous comment makes things sound more complex than they actually are.  This is very easy to do and remember, that you are still developing. Even if you are live, clearing the cache is ok and sometimes necessary.

Just remove the current fontawsome files from your server by deleting them. Then download the new version and upload to your site and follow the instructions https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself.  Just upload to your custom theme folder. I would put it in it's own folder somewhere.

Alternatively, you can use the pug in https://fontawesome.com/how-to-use/on-the-web/using-with/wordpress
APD TorontoSoftware Developer

Author

Commented:
Sorry for the delay

This is a new site with very few files.

I deleted everythigin related to the old font Awesome and installed the plugin, but nothing happened on the front end even after Ctrl+F5, so I changed my code to use the shortcode instead:
<!--i class="fas fa-cross"></i--> <?php echo do_shortcode("[icon name=\"cross\"]"); ?>

Open in new window


when I inspect, I see
<!--i class="fas fa-cross"></i-->
<i class="fas fa-cross"></i>

Open in new window


to me this means that the plugin is installed correctly, and I see no errors in Chrome debug, but no icon still.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
if you use the browser dev tool by hitting the f-12 key then looking in the console do you see any errors?
APD TorontoSoftware Developer

Author

Commented:
Only when I Preserve log I see

Error in event handler: TypeError: Cannot read property 'getCurrent' of undefined
    at e (chrome-extension://lhdoppojpmngadmnindnejefpokejbdd/adapter.bundle.js:31:1210)
Navigated to http://192.168.2.200/m-p-c.org/

Open in new window


Whichu I think its unrelated.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
From a quick google search, that shows up as an AXE chrome extension. Can you disable that temporarily, close the browser, refresh and try again. It may be unrelated but at least give it a test.
APD TorontoSoftware Developer

Author

Commented:
Disabled axe and the error disappeared, so no errors are coming up, but there is no font Awesome icon showing up.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
you want to provide a link to your web page?
APD TorontoSoftware Developer

Author

Commented:
I couldn't share link, as its http://localhost and my live server has issues.

I made it work using the CDN from David's link.

Thanks!
David FavorFractional CTO
Distinguished Expert 2019

Commented:
Glad you got this working!