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
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
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
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
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.
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
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.
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.
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.
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!
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.
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)
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