Font Awesome not showing on WordPress (please, read the question before to answer)
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 :)
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?
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.
I would recommend to use a newer theme,the one you are using is based on old Bootstrap v3 ...
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)
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...
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:
Strange, I don't get that error nor in Chrome nor In Firefox, even clearing the cache....
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.
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!
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
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
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
Note that it may need extra CSS adjustment if there was custom CSS related to fontawesome...
here is an example
old sytaxt v4
new v5 syntax v5
<i class="fa fa-heart"></i>
To get the icon list and syntax
<i class="fas fa-heart"></i>
Select any free icons and you will get the syntax
Note there is a paid version for extra icon and style, make sure you download all required files and change your links accordingly
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.
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.
Thank you again :)
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
heart was present in both version and have the same number f004
Also make sure you are using the correct fontawesome CSS based on the fontawesome version v4
Or deinstall the theme, changing over to something like GeneratePress.
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
is used and it is not shown where the Unicode is set to the ::before pseudo-element of a link.
<i class="fas fa-angle-right"></i>
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.
And compare with the one that appear.
In CSS you can check every place you see...
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...
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.
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
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.
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...
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...
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!