Avatar of Marco Gasi
Marco GasiFlag for Spain asked on

Font Awesome not showing on WordPress (please, read the question before to answer)

Hi guys.

So, I have inherited a WordPress website from a owner who fought with the original developer. The website is 3 years old, but the developer had blocked all updates, so I have successfully managed to get everyting up to date.


But almost Font Awesome icons are not showing up!


Notice: I can't access theme direct support since the them has been bought by the original developer.


So I have tried Font Awesome plugin and Better Font Awesome plugin but they didn't solve my issue.

Obviously, I have cleared the cache, used another browser, used private windows and so on...

Currently, I both plugins are disabled. You can see the live site at http://dev.gabetticasecapoverde.it


Any advice will be appreciated :)


Thank you!

WordPress

Avatar of undefined
Last Comment
Marco Gasi

8/22/2022 - Mon
ste5an

Notice: I can't access theme direct support since the them has been bought by the original developer.
Check that first. This can mean, that you need to license it.

But almost Font Awesome icons are not showing up!
hmm, I don't miss them when looking at your page.. maybe you should start showing us the problem with a sketch?
lenamtl

Hi,

You said almost Font Awesome icons are not showing up 
So some did, so maybe those that appear are SVG and not directly fonticon.
Or you see other fonticon like fontello or some icon that come with Bootstrap 3

Make sure to use the syntax that match the version you are using and new icons may be added to the new version too.
So if you change fontawesome version from v3 or v4 to v5 the syntax have change and this won't work correctly.
If this is the case you will need to change the syntax or get back to the original Fontawesome version that come with the theme.

Your version Font Awesome Free 5.13.0
Actual version 5.15
Font and syntax related to this version : https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free

The problem may also related to the theme tool like wp bakery or similar tool.

Note you have error into the browser console (right click inspect) that need to be fix.

control.min.js?ver=1.0:1 Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
    at Object.success (control.min.js?ver=1.0:1)
    at fire (jquery.js?ver=1.12.4-wp:3500)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:3630)
    at done (jquery.js?ver=1.12.4-wp:9796)
    at XMLHttpRequest.<anonymous> (jquery.js?ver=1.12.4-wp:10057)

Open in new window

I would recommend to use a newer theme,the one you are using is based on old Bootstrap v3 ...
ASKER
Marco Gasi

Hi, thank you both for trying to help.
@ste5an:
about the license, the website owner doesn't want pay again for a theme that has been already bought when the website has been built; unfortunately, the owner doesn't have license data...

@both
here some sketch token from the page https://dev.gabetticasecapoverde.it/propriet%C3%A0/appartamento-plaza-j/


Chrome shows a white space between the visible icons (btw, they all are font-awesome icons)
Firefox shows some placeholder.
The firt icon after the print is the fa-heart. For bot print and heart icons the syntax is the same as you can see in the following sketchs:
(print icon is showing)
(heart icon is not showing)

The linked stylesheet shows this:
@lenamtl
Strange, I don't get that error nor in Chrome nor In Firefox, even clearing the cache....


I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Chris Stanyon

Hey Marco,

The problem you have is with how your font is named. When you import a font into your CSS using the @font-face rule, you get to give it a name. It's this name that you then use within your CSS. On your site, you seem to have 2 versions of Font-Awesome in play - one is named 'Font Awesome Free 5' and one is named 'FontAwesome'.

You're trying to use 'Font Awesome Free 5' in your style.css file and that's causing you a problem. Change it to 'FontAwesome' and it will sort out your problem.

As to why you have 2 version - I don't know. It maybe something the previous developer has messed up or perhaps it's a theme issue. If your client won't pay for the themes support, then you'll have to do the digging yourself.
ste5an

Check the web server paths and permissions.. seems like the webfonts path is not existing or missing permissions: url(../webfonts/fa-regular-400.woff2).


About the license:
This means the owner is acting unlawful right now and can be held responsible. Either he pays right now again or his lawyer needs to find a solution. Important is also, that he is acting intentional. Thus: Lawyer!
Chris Stanyon

About the license:
This means the owner is acting unlawful right now and can be held responsible.

Simply NOT true. When you buy a theme, your license lasts for the lifetime of your site. You may not have ongoing access to updates and support, but you DO NOT need to renew the license every year

That URL is relative to the fontawesome server and does exist
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
Marco Gasi

Hi Chris.
I tried to rename the font-family to FontAwesome but then the print icon has disappeared too :D
I'm going to check if I find where exactly the two font-awesome are linked
lenamtl

Hi,

Like I said earlier you need to use the correct syntax based on the Fontawesome version

You have 2 solutions
Rever back to you original fontawesome version probably v3 or v4
or if you keep v5 then you need to adapt all icon code used in template file including the CSS.
doc to update from v4 to v5
https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/upgrading-from-version-4

Note that it may need extra CSS adjustment if there was custom CSS related to fontawesome...

here is an example

old sytaxt v4 
<i class="fa fa-heart"></i>

Open in new window

new v5 syntax v5
<i class="fas fa-heart"></i>

Open in new window

To get the icon list and syntax
Select any free icons and you will get the syntax
https://fontawesome.com/v5.15/icons?d=gallery&p=2
https://fontawesome.com/v5.15/icons/heart?style=solid

Note there is a paid version for extra icon and style, make sure you download all required files and change your links accordingly

David Favor

It appears when you cloned the dev site, full URL rewriting was skipped...

https://webpagetest.org/result/211007_AiDcBX_8c618dda62eb0ca359372880fd6bfba0/1/details/#waterfall_view_step1 clearly shows this, so first step is to fix all URLs using wp-cli.

Next, wrap the site in a free LetsEncrypt cert, as logins are all clear text now so this site is begging to be hacked.

So first step, fix site till all red icons are gone from WPT, then see if problem clears or persists.

Next step, this site runs Visual Composer... also referred to as WP Breakery... er, I mean WP Bakery...

This is one of the most hacked plugins ever written, so next step is to get into ThemeForest + update this plugin... as an outdated VC plugin is a hack waiting to happen.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ASKER
Marco Gasi

Wow, how many tips, thank you so much! I just have a question.
Summurizing, lenamtl and Chris are on the right way, though almost every comment has been useful (so it will be hard recognize points with this new system I still don't understand well :).

First I have replaced all family names with "Font Awesome 5 Free": the opposite of the Chris' suggestions but he put me on the right way. With this I have got the most of icons showing up
.
Then I had to look at the templates replacing "fa" with "fab", "fas" or "far" when needed.

EDIT: >But this morning I saw everything was wrong again. After a lot of sweating I ended up to reactivate Font Awesome plugin, block the 2 scripts linked by the theme and icons are shown as expected.

But the section "Ultime news" in http://dev.gabetticasecapoverde.it/blog/. In the original website the font family was FontAwesome, in the dev website (where I'm trying to get everything up-to.-date, the font-family, as I said is Font Awesome 5 Free. Reverting To FontAwesome the family only for this element doesn't change anything.

This icon has Unicode f105 and is let's say a "sister" of icon f105 which is correctly shown in several points in https://dev.gabetticasecapoverde.it/propriet%C3%A0/appartamento-plaza-j/ I can't see any difference in the source between the 2 pages.
Any idea?
Thank you again :)
ASKER CERTIFIED SOLUTION
David Favor

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
lenamtl

Hi,
The theme is https://themeforest.net/item/wp-estate-real-estate-responsive-wordpress-theme/5042235
So you can buy it 49$ to get support, this could save you time and prevent you to breake the theme...

What may happen for some icons that are shown and other not is that icon in CSS is  related to font number f105
so it check that number to display the appropriate icon.
so If this number exist in each fontawesome version it will be displayed correctly as it it not depending of syntax.

So you need to make sure that all icons present in your CSS exists in the fontawesome version you are using.

Sin ce Fontawesome v5 there was a lot more icons compare to v4.
So you need to update the CSS too to make sure the icon number exists

For example
v4 https://fontawesome.com/v4.7/icons/
v5 https://fontawesome.com/v5.15/icons?d=gallery&p=2

For example
heart was present in both version and have the same number f004
https://fontawesome.com/v4.7/icon/heart
https://fontawesome.com/v5.15/icons/heart?style=solid

Also make sure you are using the correct fontawesome CSS based on the fontawesome version v4
font-awesome.min.css

Open in new window

v5
all.css

Open in new window

ste5an

@Marco: You should follow David's advice. He's a real pro in the WP world.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
David Favor

As @lenamtl mentioned, if you're running a premium theme, purchase support.

Or deinstall the theme, changing over to something like GeneratePress.
ASKER
Marco Gasi

Okay.
First things first :)

I'm not using illegally a premium theme and all I said is just the truth: 3 years ago the website owner asked to one of their friend to build the website. The theme has been bought from Envato Market and I have found the Envato plugin installed in the website. Through this plugin I've got the theme updated to its last version. But the theme support requires to login or to register. To register I should use Envato licensing code but I don't know it I only have an Envato token stored in the database which allowed me to update the theme. To get the Envato licensing code I should access ThemeForest with the original dev credentials but I can't ask him because he's not been happy when the owner has hired me to mantain the website. The owner doesn't want to talk with the original dev. Bleah!

@lenamtl: yes you're right, there are many versions of FontAwesome but 3 years ago version 5 had already been released.
That said, I don't understand why in the same page (https://dev.gabetticasecapoverde.it/blog/) the same icon is shown in a place and not in another. Or better, I see that it is shown where the syntax
<i class="fas fa-angle-right"></i>

Open in new window

is used and it is not shown where the Unicode is set to the ::before pseudo-element of a link.
But why? There is a workaround?

@David: the official and outdated website is on https://gabetticasecapoverde.it hosted by IONOS. I had just forgot to link the https page
So in https://dev.gabetticasecapoverde.it I have already used Better Search and replace to fix all urls (since IONOS doesn't allow to use wp-cli in share hosting).
I have seen the WPT results and I'm struggling becaue I can't find where fontawesome/css/ font-awesome.min.css is linked, so I'm not able to fix that error. I'm downloading the whole website to search locally for that. So I have just renamed fontawesome.min.css to font-awesome.min.css.
Now all icons are in place but the three in the blog page...

I'll try to fix the other errors.


lenamtl

For every icons that are not displayed you will need to right click & inspect this will display the code and also the CSS related to it
And compare with the one that appear.

In CSS you can check every place you see...
font-family: "Fontawesome";

Open in new window


I would buy the theme license at 49$ and you will get the free support for a while that may save you several hours to debug....Later you will be able just to renew the support when you need it.

The thing is there are too many code involved: the theme, the theme tool if any, other plugins and your own functions and CSS classes so this will required sometime to fix.

We can just point you investigation path...

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
David Favor

1) A 3x year old theme from ThemeForest should be updated manually.

The Envato updater plugin rarely works correctly.

Update the theme manually, if you haven't done this yet.

The entire problem might be your theme is still 3x years old, as it's never received an update.

2) If you try referencing an HTTPS Font Awesome link from an HTTP site, likely this will fail in many subtle ways... which is only 1x of several reasons to wrap all sites (dev, staging, production, whatever) in free LetsEncrypt certs.
ASKER
Marco Gasi

Hi guys.

Yes, I agree the fastest thing should to buy the them to get support, but the owner doesn't agree and she doesn't pay enough to do it. Currently, I'm just doing the possible to update the website for a small amount of money, then I'll list all necessary tasks and I'll give her a quote.

I asked to you because when I find a problem that seems particularly silly to me, I stubbornly, forget that I’m working and get caught up in the passion of challenge... I know, I’m a bad businessman :)

@lenamtl: I used VS Code search tool to scan the whole website: now all font-family values are set to "Font Awesome 5 Free". Anyway, I know you all can only point me to an investigation path and you all did it. In fact I'd like there were in place the old point assignment system to give something everyone: it's really embarassing to choose a solution and many experts deserve a fair amount of points...

@David, I re-ran Better search and replace tool but it can't fins those urls which points to the original website: they should be in the DB, isn't it?
About the theme update, it looks the result is good enough: Only 3 missing icons and a non-sticky search bar: the get an updated code I thing it be a good price to pay.

Anyway, thank you all and everyone for the really good advices. I'll try to share points in the best way but EE is less flexible than it was some years ago.

Thank you all so much
David Favor

1) Running Better Search + Replace might or might not be sufficient.

Better to use wp-cli at the command line, which requires sensible hosting.

2) Font Awesome will almost certainly still fail, till you wrap the site in a TLS cert (free from LetsEncrypt) so entire site is 100% HTTPS.

Trying to mix HTTP + HTTPS creates so many problems... with the only solution being... run as HTTPS...

Me personally, my first step to any site migration is to setup Apache + HTTPS + HTTP2 + Brotli serving an empty directory correctly first, then I do may site restore.

http://dev.gabetticasecapoverde.it is still returning a 200 success along with content.

Best to wrap the site in a free cert, then promote HTTP -> HTTPS for all requests.

https://www.experts-exchange.com/questions/29137540/How-to-Get-Apache-on-MAMP-Pro-to-only-server-HTTPS.html provides 1x approach to this type of request promotion.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
David Favor

Aside: A debugging trick which might assist you.

Take a look at https://WebPageTest.org report for your site.

Notice the odd 404 errors... for example...

https://webpagetest.org/result/211009_AiDcPJ_59852c710b88410305e605678cbdd0ad/1/details/#waterfall_view_step1 request #28 shows the request for a jquery resource ran for 2.3 seconds... returned 200 success, then the WPT report shows up as a 404.

Thoughts about this single request...

1) 2.3 seconds to return + run any Javascript is to long, so time to change hosting.

2) How can a request return both a 200 + 404?

3) To answer #2, I suspect this is some sort of HTTP + HTTPS mismatch, as likely the jquery script off the site worked (200 success), then some other resource being referenced by this script (404 error) occurred due to the HTTP + HTTPS mismatch.

You could spend time debugging this + the fix will almost surely require wrapping the site in a cert... so more time optimal to just wrap the site in a cert, then see if 100% of all problems magically heal themselves...
ASKER
Marco Gasi

Hi David, thank you for staying :)
Actually, I have realized that the dev website urls was incorrect, using http even if the website is wrapped in a cert. SO I have changed this and I have installed WP Force SSL & HTTPS Redirect plugin.
But those 3 icons still remain not found.
Anyway, I have already reported to the owner the issues to fix (the other one is a sticky bar which doesn't want to be sticky :D)

So, if she wants to pay, I'll do the job otherwise I won’t do it.
Thank you so much and I’m sorry it took me so long to figure out what the problem was about the SSL: I was sure to have already fixed the website urls in WordPress dashboard!
Cheers