asked on

Upgrade Font Awesome in WP

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.

ASKER CERTIFIED SOLUTION

David Favor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

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 Toronto

ASKER

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 Fell

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

APD Toronto

ASKER

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 Fell

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 Toronto

ASKER

Disabled axe and the error disappeared, so no errors are coming up, but there is no font Awesome icon showing up.

Scott Fell

you want to provide a link to your web page?

APD Toronto

ASKER

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 Favor

Glad you got this working!