7.6.1 Font Awesome Icon Issue

[CrashW 0]

Hi,

We seem to be having an issue with our Font Awesome 5 icons within a 7.6.1 installation of WHMCS.  I have read a number of articles here but am unable to find one describing the issue we are having.  Most are related to the update of Font Awesome from 4 to 5 which caused a required change within the code from Front Awesome classes FA to FAS.  Now I have checked all of our templates and the source code being putput to the browser and all of our icons are using FAS but still don't work.  The strange thing is if we change FAS in a template file back to FA (Supported under Font Awesome v4) they start working again.

Has this been seem before and have we seemed to have had an issue with our 7.6 upgrade?  Wondering if we need to re-do the upgrade so Font Awesome 5 is actually being imported.

Thanks for any help.

[brian! 1,727]

are you using a custom template or Six/Standard_cart ??

[CrashW 0]

Hi,

Thanks for your response.

We are using a custom template with only slight differences.  I have done a comparison of the files between Six and our Template and the Font Awesome icon classes are the same (FAS V5 doesn't work but FA V4 does work).

With regards to the cart templates we are using custom templates for most categories and all icons using FA are working but the standard_cart one that we use on the Domain Registration page isn't working with FAS classes.  Which again if I go into the standard_cart template --> domainregister.tpl and change all references of FAS back to the V4 FA they start working.  Issue is some of these i.e. SideBars etc are dynamically set else where which I can't seem to change.  I was going to go through and change as many as I could back to FA but was worried that if it was a wider issue and a fix came out I would have to go through and do it all again backwards.

Thanks

 

 

[brian! 1,727]

15 hours ago, CrashW said:

We are using a custom template with only slight differences.  I have done a comparison of the files between Six and our Template and the Font Awesome icon classes are the same (FAS V5 doesn't work but FA V4 does work).

that sounds as though you're loading outdated css/js files and not defining FA5 correctly - they seem to be defining FA4 only.

15 hours ago, CrashW said:

Issue is some of these i.e. SideBars etc are dynamically set else where which I can't seem to change.

you might be able to use Smarty in sidebars.tpl to remove the 'fas ' from the icon values... now whether that's worth the effort, or whether it would just be simpler to fix the issue of why FA5 isn't being used by default is up to you...

15 hours ago, CrashW said:

I was going to go through and change as many as I could back to FA but was worried that if it was a wider issue and a fix came out I would have to go through and do it all again backwards.

I doubt WHMCS are going to release a fix for an issue that only you are seeing with your custom templates - if your custom is based on Six, then it shouldn't be too difficult to update it; if it's a commercial custom, then contacting the developer for an updated version would be the way to go.

[CrashW 0]

Hi,

It does appear to be as if the wrong css/js files are loading but do you know how / where these are located so I can check.  I have looked through all of the template files and it appears the FA libraries aren't loaded up directly within the templates.

Thanks

[brian! 1,727]

On 10/09/2018 at 13:01, CrashW said:

It does appear to be as if the wrong css/js files are loading but do you know how / where these are located so I can check.  I have looked through all of the template files and it appears the FA libraries aren't loaded up directly within the templates.

if the custom is based on Six, then it effectively only loads 2 relevant files (1 x css; 1 x js) and those links are located in templates/six/includes/head.tpl

<link href="{$WEB_ROOT}/templates/{$template}/css/all.min.css?v={$versionHash}" rel="stylesheet">
<link href="{$WEB_ROOT}/templates/{$template}/css/custom.css" rel="stylesheet">
<script src="{$WEB_ROOT}/templates/{$template}/js/scripts.min.js?v={$versionHash}"></script>

ignore custom.css for now, but FA5 will be defined in those other two files... assuming your custom header is loading similar files, replacing those files with the versions from Six should solve the FA5 issue... though that will then leave you with potentially two problems...

1. you've modified the custom templates to remove FA5 type links, so you would have to put them back (some of them might work either way - some won't)
2. you might find new issues occurring due to the "slight differences" that you've made to the templates... but again, without knowing those differences, it's hard to tell how reliant on previous js code they are.

[CrashW 0]

Hi,

I updated the files you listed and our issue has been fixed.  Fortunately I didn't change any of them to FA as I wanted to see if there was a better solution and there was.  Also didn't have any issues with custom pages as I have used the Bootstrap icons instead but may update them now to the latest FA now it's working.

Thanks again for the help.

[spartanza 1]

Hi there. thank you for this post.
I have the same issue, however, am using a template purchased, and not one of the default ones. How would I go about fixing my icons issue?
I have seen the following links - https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4 and https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4#shims however, I must admit that this goes over my head.

What should I edit or add in what file and where in order to solve this issue.

Thanks for your great community support!

[brian! 1,727]

6 hours ago, spartanza said:

I have the same issue, however, am using a template purchased, and not one of the default ones. How would I go about fixing my icons issue?

if you haven't already, i'd suggest going to @ThemeMetro and getting an update for the Redo template that you're using - looking at their online demo, it appears to have been updated for this icon issue.

at the very least, you'll probably need to change the current FA link in your header file (I don't know the template name off-hand) from...

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

to...

<link rel="stylesheet" href="/whmcs/templates/redo/assets/css/fontawsome.min.css">

if I do that in Firefox, then the missing icons on your menu appear.

[spartanza 1]

Thank you so much @brian!. I will see if I can find the file - it wouldn't be header.tpl? I checked that and it doesn't have that line in it.
I am sure @ThemeMetro will respond to my query I have sent earlier about this.

Thank you again.

[ThemeMetro 30]

3 hours ago, spartanza said:

Thank you so much @brian!. I will see if I can find the file - it wouldn't be header.tpl? I checked that and it doesn't have that line in it.
I am sure @ThemeMetro will respond to my query I have sent earlier about this.

Thank you again.

Hello @spartanza the correct file is /includes/head.tpl

[spartanza 1]

Sorted. Thank you