Prevent backlight from contacting fontawesome.com

Backlight 4 & 5 Support
#39

You’ll need to use custom css.
Backlight creates its main css file based on your choices in page, album, and album set templates. So there’s not one file that will fix this for everybody.

I’m working on a tutorial that will guide you through creating your own custom css file.
In the mean time, review the document on using a custom stylesheet.

The Docs are a little out of date. The Custom CSS setting will be found in your page template under Advanced Settings.

Stay tuned for the tutorial. I should have it ready in a couple of hours or so.

2 Likes
#40

Great, many thanks @rod_barbee !
I’ve already had a look at the document, and included the sample css with the red page backgound. But one crucial point would be how are the selectors named that are needed in order to replace the (button) icons by anything working, maybe from another characterset. I think I’d need to re-define those and do not know the concrete css syntax.

#41

Don’t worry, the tutorial will guide you through making basically one change to all the rules that use Font Awesome 5 Free icons.
(I’ll get it posted in a couple of hours or so. I’ve got some other things I have to get done in the next couple of hours though)

#42

Looking forward to it. By going through this problem i have learned and re-learned a lot. Unfortunately Not knowing in internals of Backlight I cannot use any of it. But I did go through all of fontawesome’s documentation and it does say that you must declare the font weight and font style

#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