I’ve just noticed I seem to have lost some icons, I now seem to have a small square box instead of page forward and back icons, also Icons like the heart (CRG) also have just a small square?
This may be due to the changes made in how Backlight uses Font Awesome. Matt has dropped Font Awesome 5 Pro and Backlight 5 now uses Font Awesome 5 Free and it loads locally rather than from the Font Awesome servers. See: Upcoming Changes to Font Awesome
What that may mean for Backlight 4 is that there is no longer access to Font Awesome 5 Pro and that could be breaking your icons.
I don’t remember if BL4 has the Settings option of serving Font Awesome locally. If so, you could use that and install the free version. I believe there is an info icon with that setting that tells you how.
You’d then need some custom css to make the free version work: Font Awesome 5 Free Unicode Fix - TTG Tips and Tricks
Another option is to simply update to Backlight 5
2 Likes
If necessary, I can also work with you to get Font Awesome working on your existing site. Upgrading to Backlight 5 is the easiest solution for everyone. But contact me directly if you decide you’d rather have hands-on assistance with your current site.
Thanks, I upgraded to BL 5 yesterday all ok now
1 Like
Hi Matthew,
I have this same icon issue with my Backlight 4 site, can you please help me get Font Awesome working on my existing site?
Hi @trottsky,
Yes, I can help.
The easiest thing is to upgrade to Backlight 5, and I would encourage you to check out the new features on offer, and decide whether that makes sense to you. As you are upgrading from Backlight 4, you can also take advantage of the upgrade discount. Let me know if you are unable to find the code we sent to your email last summer when Backlight 5 released.
If you decided not to upgrade to Backlight 5, then please send the following to me via direct message here on the forum, or via email:
- FTP credentials for your web server
- login credentials for your Backlight admin
This will allow me to make whatever necessary changes to fix your icons.
Cheers,
Matt
Thanks Matt,
From what I have read I don’t think there are any advantages for me to upgrade, since I only use Backlight for the client response plugin. Please correct me if I am wrong.
I’ll send you a direct message with the credentials.
one advantage is php compatibility
Dear Matthew, Hi
I gueess I have same issue sqare icon, how can I upload Font Awesome?
Best regads,
Alexey
@alex See my reply above.
Further from that, if you want to do this yourself, you can either purchase a Font Awesome Pro license and add them to your custom folder, or you can follow Rod’s tutorial how to replace with Font Awesome Free.
Or, you can go the easiest route and update to Backlight 5. Not only will that solve the problem, but it will keep your site compatible with the latest version of php, reducing the chance of your site going dark.
2 Likes
I followed the instructions in Rod’s tutorial. When I enabled the feature to load Font Awesome resources locally (and saved the settings), I noticed that the “fontawesome” folder was not created in the backlight/custom/ folder, so I manually created it there. After uploading the assets from the Fontawesome 5 Free download to that folder, I refreshed my site page and… no change.
What am I missing?
Whatever you downloaded from Font Awesome, there should be a fontawesome folder; just copy that into backlight/custom, and everything should be in the right place.
Thanks, Matt, my error was apparently not refreshing the browser cache to make sure the new css file was loaded. Newbie mistake! All seems to be working - thank you!
Well, it worked momentarily. Now back to icons missing.
I’m not seeing any icons missing. Try clearing browser cache again.
Looks good to me as well. Browser cache can be a real PITA.
Well this is interesting… refreshed the Edge browser cache - no joy. Opened the same page in Chrome, and icons are correct, except, the icons in the Image/Share menu don’t show up. It appears to be a font color problem, since clicking in that area opens a file download list.
And then there are still some icons missing:
More: Restarted Edge and the problem disappeared, except for the download menu.
I can see the download and permalink icons in Safari iOS on my iPad. But not in Firefox.
tryadding:
font-weight:600; to the rules for those two icons in your custom css.
You’ll find the download rule starting on line 109
and for the permalink rule, starting at line 115 in your custom css
For example, the download icon:
.fancybox-pallet .fb-image-download > a::after {
content: "\f019";
font-family: "Font Awesome 5 Free";
font-weight: 600;
}