Prevent backlight from contacting fontawesome.com

Backlight 4 & 5 Support
#43

Just added this to my custom css and it appears to work. just need to go through all my albums and galleries to check.
/* fix fontawesome */
ul.breadcrumbs li::after {
content: ‘\f107’;
font-family: “Font Awesome 5 free”;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 900;
}

ul.breadcrumbs li:last-child::after {
content: ‘\f107’;
font-family: “Font Awesome 5 free”;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 900;
}

.fa_pseudo::before,
.fa_pseudo::after {
font-family: “Font Awesome 5 free”;
}

nav.nav_h .menu>.menu-item.menu-item-has-children>a::after,
nav.nav_h .menu>.menu-item.menu-item-has-children>span::after {
content: ‘\f107’;
font-family: “Font Awesome 5 free”;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 900;

}

content: ‘\f107’;
font-family: “Font Awesome 5 free”;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 900;
}

nav.nav .menu-item.menu-item-has-children>a::after,
nav.nav .menu-item.menu-item-has-children>span::after {
content: ‘\f105’;
font-family: “Font Awesome 5 free”;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
font-weight: 900;

}
This incorporates all of the parameters recommended on the Fontawesome webs site

#44

Here is the promised tutorial.

1 Like
#45

You’re a rockstar, Rod.

When I have time, I might be able to use this to slap together some form of official fix. If I do, you will have saved me a lot of time and headache.

#46

Yay!

#47

Thanks Rod using your notes I extracted the css file and edited it , also removing identical duplicate declarations. As much as I can test it on my site it all appears to work. I have also changed the odd font-weight 400 to 900 as the fee only supports 900
This is my additions to my custom CSS
/* ===== fix fontawesome 5 free ===== */

ul.breadcrumbs li::after {
content: ‘\f105’;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

nav.nav .menu-item.menu-item-has-children>a::after,
nav.nav .menu-item.menu-item-has-children>span::after {
content: ‘\f105’;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

nav.nav_h .menu>.menu-item.menu-item-has-children>a::after,
nav.nav_h .menu>.menu-item.menu-item-has-children>span::after {
content: ‘\f107’;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

nav.nav .touchable .menu-item.menu-item-has-children.hover>a::after,
nav.nav .touchable .menu-item.menu-item-has-children.hover>span::after {
content: ‘\f0c1’;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

nav.nav_v li.menu-item.menu-item-has-children>a::after,
nav.nav_v li.menu-item.menu-item-has-children>span::after {
content: ‘\f107’;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

nav.nav_v .menu-item li a::after,
nav.nav_v .menu-item li span::after {
content: “\f105”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.fb-search #search button[type=submit]::after {
content: “\f002”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

#cart-widget::before {
content: “\f07a”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

#fotomoto-widget::before {
content: “\f291”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

#social_media::before {
content: “\f234”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;

}

form.search-form button::before {
content: “\f002”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

ul.breadcrumbs li:last-child::after {
content: ‘\f107’;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.fa_pseudo::before,
.fa_pseudo::after {
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

ul.single_icons a::after {
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.fancybox-pallet .share-facebook>a::after {
content: “\f09a”;
font-family: “Font Awesome 5 Brands”;
font-style: normal;
font-variant: normal;
font-weight: 400;
;
}

.fancybox-pallet .share-twitter>a::after {
content: “\f099”;
font-family: “Font Awesome 5 Brands”;
font-style: normal;
font-variant: normal;
font-weight: 400;
}

.fancybox-pallet .share-pinterest>a::after {
content: “\f0d2”;
font-family: “Font Awesome 5 Brands”;
font-style: normal;
font-variant: normal;
font-weight: 400;
;
}

.fancybox-pallet .fb-image-download>a::after {
content: “\f019”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.fancybox-pallet .fb-image-permalink>a::after {
content: “\f0c1”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.fancybox-pallet .fb-googlemaps>a::after {
content: “\f5a0”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.fancybox-button–crg-s.off::after {
content: “\f004”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.fancybox-button–crg-s.on::after {
content: “\f004”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.pagination ul li.previous a::before,
.pagination ul li.previous span::before {
content: “\f104”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.pagination ul li.next a::before,
.pagination ul li.next span::before {
content: “\f105”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.button.download_image::before {
content: “\f019”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.button.googlemaps::before {
content: “\f5a0”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

button.fotomoto::before,
.fotomoto_single button::before {
content: “\f291”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

button.add-to-cart::before {
content: “\f07a”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.grid-button.crg-select.off::before {
content: “\f004”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
font-weight: 900;
}

.grid-button.crg-select.on::before {
content: “\f004”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
font-weight: 900;
}

.grid-button.crg-feedback::before {
content: “\f086”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

#crgModal button.crg-select.off::before {
content: “\f004”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

#crgModal button.crg-select.on::before {
content: “\f004”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

#crgModal-content .ratings_stars {
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

.lights-control button[data-level=“off”]::before {
content: “\f004”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

nav .menu-item a.locked::before,
nav .menu-item span.locked::before {
content: “\f023”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

nav .menu-item a.hidden::before,
nav .menu-item span.hidden::before {
content: “\f070”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

nav .menu-item a.before-publication::before,
nav .menu-item span.before-publication::before {
content: “\f017”;
font-family: “Font Awesome 5 free”;
font-weight: 900;
font-style: normal;
font-variant: normal;
}

#48

Wow, Rod - your description is brilliant. Many thanks!! I’ve followed the steps and implemented the new css file - it seems everything is working!!! Thanks a lot also to Steve for his analysis and tests.
Best wishes, Mark

#49

Hi Rod,
I’ve tried this thanks and can get Font Awesome icons to load on a test page Pangfontawesome - OWENS - Professional Photographer, Ipswich
However, the icons in Backlight Admin are not displaying properly - just the dodgy little box.
I expect it is PEBKAC on my part.

Screenshot 2023-01-20 at 16.02.45
Screenshot 2023-01-20 at 16.02.452318×1232 169 KB

Thanks,
TomO

#50

the fix I found is only for the site. As users, we don’t have access to the styling for the Baclklight Admin area

#51

Thanks Rod,
I thought it was me doing something stupid.

#52

Thanks to all involved for this enlightening discussion. This job is finally done, had not thought that I’d be able to do this. As Matt has said before: This has saved me hours of frustration. Special thanks to Rod – you ARE indeed a rock star :blush:.

#53

Hi all,

is there a solution to this problem in the meantime?

Best regards,
Oliver

#54

Yes. Until Matt comes up with an official fix, see my post above

#55

Thank you Rod,

I already used your fix on my sites! Works great :+1:
I was just asking for the Backlight backend, so lets wait for Matts fix :slight_smile:

Thank you so much.
Best regards,
Oliver

#56

Hi all,

how does the Fontawsome fix work in wordpress?
And I have seen, that wordpress also uses Google Fonts :grimacing:

Is there a tutorial on how to fix this?

Thank you and best regards,
Oliver

#57

You could try this for Google fonts.

I’ve not tested in WordPress, but it seems that the procedures outlined in both the Font Awesome and Google Fonts tutorials should work in your WordPress theme.

#58

Hi Rod,
I used your guidance to load Raleway ‘locally’ and it works for my Wordpress theme
TomO

#59

That’s all Matt :wink:

I just installed WP in a test site where I set Load Font Awesome resources locally to yes (and I disabled the css that loads the local files). The Pangolin pages show the missing fonts.
I created a new theme base on a Pangolin page template and installed it in WordPress. The Font Awesome 5 Pro fonts are being loaded anyway.
Font Awesome seems to be included in WordPress. Whether it’s loaded locally or from the Font Awesome servers, I can’t tell.

2 Likes
#60

Thank you very much Rod,
I will test that out :slight_smile:

Best regards,
Oliver

#61

Dear Rod,

Your tutorial “Font Awesome 5 Free Unicode Fix - TTG Tips and Tricks” works great with Backlight, unfortunately I have no success with it on Wordpress. Even after exporting a new designed WP-template.

I also noticed that once " and another time ’ is used in the same css (even in speacock110 post):
content: ‘\f107’;
font-family: “Font Awesome 5 Free”;
font-weight: 600;
or
content: “\f105”;
font-family: “Font Awesome 5 Free”;
left: 0;

What else can I try?

Thank you.
Best regards,
Oliver

#62

Google “remove Font Awesome from WordPress”
You’ll find tutorials on modifying the theme. Maybe even a plug-in that will do it.