I wanted to post this for anyone else that may want to upgrade to Font Awesome 5.

Font Awesome 5 was a full rewrite and the Unicode charter set no longer work as they did with version 4. With version 4 using the Unicode like this ‘&#xf217; Add to Cart ‘ worked when creating input buttons. With version 5 you now have to do it like this ‘<i class=”fa”>&#xf217;</i> Add to Cart’ or use it within a class as

Code:
.cartbutton {
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f217";
}
which does not work for input buttons. Also this ‘<i class="fas fa-cart-plus"></i> Add to Cart’ works for links or button tags not input buttons.

What to do if you want to use version 5 and Unicode!

One difference to note: there are different icon sets to use!

Style Availability---------Style Prefix--------Example

Solid Free------------------- fas----------------- <i class="fas fa-camera"></i>
Regular Pro Required----- far----------------- <i class="far fa-camera"></i>
Light Pro Required--------- fal----------------- <i class="fal fa-camera"></i>
Duotone Pro Required---- fad----------------- <i class="fad fa-camera"></i>
Brands Free----------------- fab-----------------<i class="fab fa-font-awesome"></i>

For some time now I have been loading Font Awesome from a free account with them and not the default CDN used in the responsive classic template… With the kit you could modify to only load what you want and not the whole 7+k of icons.. The kit also has the ability to mix version 4 and 5 so the Unicode charters still work as before and you still have the new icons! However, version 4 unicode works, but the tags need to match version 5 standards. In Font Awesome documents is a list of changes, as a example version 4 was <i class=”fa fa-arrow-circle-o-down”></i> is now <i class=”far fa-arrow-alt-circle-down”></i> ..

In my testing, using a sample html page following FA instructions for hosting the fonts worked. However, when trying the same instructions on my ZC site they did not work for me. I had to setup both versions for the Unicode and new tags to work offline or if FA fails to load.

includes/templates/MY_TEMPLATE/css/font-awesome.css (version 4)
includes/templates/MY_TEMPLATE/css/all.css (version 5)
includes/templates/MY_TEMPLATE/fonts (version 4 font)
includes/templates/MY_TEMPLATE/webfonts (version 5 font)

With the follow added just below the call to load jQuery to includes/templates/MY_TEMPLATE/common/html_header.php
Code:
<script src="https://kit.fontawesome.com/YOUR_KIT_ID.js" crossorigin="anonymous"></script>
<script type="text/javascript">
(function($){
var $span = $('<span class="fas" style="display:none"></span>').appendTo('body');
if ($span.css('font-family') !== 'Font Awesome 5 Free' ) {
// Fallback Link
$('head').append(<?php echo '\'<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'font-awesome.css' . '" />\''; ?>);
$('head').append(<?php echo '\'<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'all.css' . '" />\''; ?>);
}
$span.remove();
})(jQuery);
</script>
Why upgrade! Why not… tons of new fonts, cool new things to work with such as stacked icons and svg’s. Font Awesome https://fontawesome.com/start

By using the kit and loading both is giving me time to work through my code and updating tags.