Prevent backlight from contacting fontawesome.com

Backlight 4, 5 & 6 Support
#22

It looks like that the reference to the css file is working, I can see the font awesome free 5.14.4 file

The instructions from Font Awesome say to

Copy the entire /webfonts folder and the /css/all.css into your project’s static assets directory (or where ever you prefer to keep front end assets or vendor stuff).

According to the instructions, the css folder and the webfonts folder should be inside the same folder

/backlight/custom/fontawesome/css/

backlight/custom/fontawesome/webfonts/

So instead of placing the contents of the extracted webfonts/ folder inside of a /backlight/custom/fontawesome/fonts folder, place the entire webfonts/ folder inside of the backlight/custom/fontawesome/ folder

#23

Is this generated by Backlight? Or are you using phplugins?

#24

yes, this snippet is gerated by backlight. I haven’t been using PHPlugins so far and do not have any experience with it.
The two directories are now directly copied to backlight/custom/fontawesome/ folder

#25

I’m trying this on one of my test sites and am getting the same results as you

@Matthew will need to chime in.

I wonder if the font-family setting is making this not work? Using the inspector I can see the css governing the font awesome icons. For example, the select checkbox:

.grid-button.crg-select.off::before {
  content: "\f004";
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
}

The font-family
'Font Awesome 5 Pro"

I don’t know if this makes a difference or not.

(I notice that the Font Awesome icons in the Backlight admin are gone as well.)

#26

in all.css the font familiy is
@font-face {
font-family: ‘Font Awesome 5 Free’;

#27

That may be the issue. @Matthew will know

Though if I change the font-family in the Inspector, I see no difference.

#28

There is a small difference in my site the little square disappears.
As you can see from the computed it should be free but not sure what network resource 1glyph is. With Pro then the rendered font is Times not fontawesome

Screenshot 2023-01-18 at 19.42.52
Screenshot 2023-01-18 at 19.42.521198×570 67.2 KB

Screenshot 2023-01-18 at 19.43.49
Screenshot 2023-01-18 at 19.43.491224×626 74.8 KB

#29

If I change things as shown I get a large Red W

Screenshot 2023-01-18 at 20.01.48
Screenshot 2023-01-18 at 20.01.481190×426 61.2 KB

Screenshot 2023-01-18 at 20.02.12

So no idea why Free \f107 returns the missing glyph square

#30

I found out what the problem is. font-weight needs to also be added to the Backlight css. Or you could add it with custom css.
This page pointed me in the right direction.

Try dropping this in your custom css file:

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: 600;
}

font-weights of 700, 800, and 900 work as well

Of course, you’d have to do this for all the icons that aren’t showing up, which may be tedious. But it works.

This doesn’t solve the missing icons in the Backlight admin areas though.

#31

I have been doing some experimenting outside of backlight and it is not all glyphs in the free version some work. I have also installed the fonts onto my Mac and tried to access them via a graphics program.
The only glyphs that work are are the ones that are visible in the Glyph Browser. Attached are a simple html test file, (why using fas fa-angle-left works but \f107 does’nt I have no idea. The other image shows the graphics program and the Glyph browser. If you select the Fontawesome font then type in its name (text on right) then you get the image on the left, but not for angle left. Works fine for any glyph in the browser.

Screenshot 2023-01-18 at 23.00.59
Screenshot 2023-01-18 at 23.00.591920×1232 87.3 KB

Screenshot 2023-01-18 at 23.03.37
Screenshot 2023-01-18 at 23.03.371920×1198 109 KB

Brain getting tired

#33

On @Mark’s album page (linked too in a comment above), simply changing the font-family to “Font Awesome 5 Free” worked for the selection icon in Client Response.
font-weight was already part of the Backlight css

#34

We mostly put this feature in for our own use when working offline, so like, Ben could work on Backlight on the train.

I’ve spent exactly zero time auditing the app for Pro vs. Free icons, so if some icons are missing in the site, or the admin, that’s why. For most of Pangolin’s life, we haven’t had to worry about whether or not folks are loading icons from an external CDN.

If you pay for Font Awesome Pro, things should more than likely work just fine. If you’re trying to replace that with the Free version, well, see what you get …

I think would be easier just to use Kookaburra. Of course, if you need Cart or Client Response, those aren’t ready for Kookaburra just yet.

#35

I suppose one could use the free version and then spend the hours on custom css.
Or just buy a pro license. Seems cheaper to just buy the license rather than spend all the time and effort on custom css.

#36

Pangolin is set up in such a way that users are able to use my Font Awesome Pro account, without having one of their own, which I considered to be a benefit and service for all. Haha. Sigh.

2 Likes
#37

The icons aren’t missing on the free version, as using class=“fas fa-angle-left” works fine, it is something about using the unicode to show the icon. As I have noticed with all three, one from Brands and Free where the unicode version works and the one from free that doesn’t without font-weight they need font-style: normal to not be italic.

Looking at the fontawesome CSS the fas, fab etc classes all add font-weight and font-style normal to the icons actual glyph class fa-angle-left etc.

As class="fas fa-angle-left is the preferred way of working that is maybe the way to go. Or Kookaburra but that is going to take some time to transfer sites over.

Is there a way of implementing the free not pro font family ($99py) is a bit expensive for fonts that are in the free version.

#38

Thanks a lot to all of you for the analysis of the problem. I’d like to replace the default characters used with client respond galleries by anything else working. Could you possibly provide me with a script that can be used in order to keep the functionality of my galleries working? Unfortunately I’m not experienced with css, webfonts and php. My understanding is I cannot further use the preferred way via external CDN due to GDPR restrictions. Many thanks!

#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