Prevent backlight from contacting fontawesome.com

volvoxturbo · March 17, 2023, 9:45am

Hi Rod,
i solved the problem by manually installing fontawesome in wordpress. Now the icons are shown in the menu again.

Thank you and best regards,
Oliver

Matthew · March 18, 2023, 5:55pm

So, here’s the function in the WP Theme that enqueues Font Awesome.

if ( !function_exists('font_awesome') ):
	function font_awesome() {
		// ...
	}
endif;
add_action('wp_footer', 'font_awesome', 22);

In a child theme, you should be able to override this by creating your own “font_awesome” function, to wit:

function font_awesome() {
	// echo your code for local Font Awesome resources.
}
add_action('wp_footer', 'font_awesome', 22);

I thought we had an article on child theming, but maybe that was an older version of the site or docs, or I’m imagining it. @rod_barbee, do you have any articles about it?

rod_barbee · March 18, 2023, 6:09pm

No. But I also think you might have had one way back when.

volvoxturbo · March 20, 2023, 9:06pm

Matt, thank you!
Do I have to copy

if ( !function_exists('font_awesome') ):
	function font_awesome() {
		// ...
	}
endif;
add_action('wp_footer', 'font_awesome', 22);

into the WP functions.php?

Best regards,
Oliver

Daniel · March 20, 2023, 10:10pm

The best way is to make a child theme. That way, when there’s a backlight update, it would not overwrite your changes. Looking at the source code, Matt already designed the Backlight theme to have a custom fontawesome loader This means that you don’t need to add anything to your theme’s functions.php file.

There are many tutorials out there to make a child theme. This one is from Wordpress: Create a Child Theme – WordPress.com Support

As far as I remember, here are the minimal steps to create a child theme. The code shown is based on what I’m using on my site. Assuming your Backlight theme name is bl_theme, I would call the child theme bl_theme_child

Make a directory in blog/wp-content/themes/bl_theme_child. This assumes that the Wordpress installation is in /blog, change this according to where you have WP installed.
In the child theme directory, create a file style.css with following content:

/*
 Theme Name:   Backlight Theme Child
 Template: bl_theme
*/

In the child theme directory, create the file functions.php with following content

<?php
function bl_theme_child_enqueue_styles() {
	// Add local style
	wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
}
add_action( 'wp_enqueue_scripts', 'bl_theme_child_enqueue_styles' );

// Add font_awesome
function font_awesome() {
	// echo your code for local Font Awesome resources.
}
add_action('wp_footer', 'font_awesome', 22);

?>

Obviously, you still need to add your local font awesome code.

Select your new child theme in the Wordpress backend.

This is what I’m basically using right now. Looking at some of the tutorials out there, there are many other options that might be of value. But this seems to work for me

Hope this helps!

volvoxturbo · March 22, 2023, 10:57am

Daniel,
thanks for your detailed explanation.

Best regards,
Oliver

Daniel · March 22, 2023, 8:22pm

Please let me know if it works for you!

michaelboatright · May 4, 2023, 3:18pm

Rod, I went to your page and followed the instructions for loading FA locally. I turned on the “Load Font Awesome resources locally” by selecting yes. Your page says Backlight will create a folder “fontawesome” inside the backlight/custom/ folder. Is this only AFTER the new version is installed? I’m on framework 5.1.1 and when I did the above, it did not create the fontawsomefolder. Is this whole thread something I have to do when the new modules come out, and when they do come out, does font awesome pro (“fa”) have to be changed or will it continue to work as in the past? Also, I use a google font, “Quattrocento sans” that has a stylesheet link to

https://fonts.googleapis.com/css?family=Quattrocento|Quattrocento+Sans&display=swap

Is that a problem as well?

Matthew · May 4, 2023, 4:26pm

@michaelboatright Don’t worry about doing this right now. We have an update releasing soon that revamps Font Awesome to no longer use a CDN.

rod_barbee · May 4, 2023, 4:28pm

When I enabled that feature, the folder was created.

But Matt’s about to release the update that will load Font Awesome 5 Free locally. In fact, the update removes the option to load locally, it just will be.

If using the far prefix, you may need to change it to fas.

More on that in this thread: Upcoming Changes to Font Awesome

michaelboatright · May 4, 2023, 4:32pm

Thanks…I read that. What about fa & fab? Quattrocento & Quattrocento+Sans?

rod_barbee · May 4, 2023, 4:57pm

I don’t know. Check the Font Awesome site to see if those are included in Font Awesome 5 free version.

michaelboatright · May 4, 2023, 5:40pm

OK, it was a bit of a dumb question. It looks like some far (fa-regular) icons, such as far fa-envelope are included in the free version as well as some fab (fa-brands): fab fa-instagram, fab fa-facebook, fab fa-linkedin and fab fa-youtube that I use.

Matthew · May 5, 2023, 1:42am

Backlight 5.2.0 is now live.

Jim · January 22, 2024, 5:39pm

I just noticed in my Backlight WordPress theme pages, the Font Awesome use in the parent menu is showing [?] instead of the \f107.

Yet when I go to a Backlight photo page (published via Lightroom), those pages do have the right icon. It’s only the pages in the WordPress theme that are broken.

More crazy, when I’m logged into my site’s WordPress backend the menu icon is shown correctly. It’s only when not logged in.

I searched around trying to sort this out and just gave up. So here I am, asking the group.

Why does the WordPress theme pages for Backlight 5.0.3 have the broken Font Awesome in the menu?

I’ve updated all the modules, which are mostly 5.4.0. My photo pages are a mix of Pangolin modules 5.0.1, 5.0.7, 5.3.0 (that’s what I get after the update).

you can find what I’m seeing at reekes.net (try Home and then Photography). Works under Photography which are Pangolin pages. It’s broken under all other pages, which are Backlight WP Theme pages.

Matthew · January 22, 2024, 5:51pm

Hi Jim,

Are you using the latest version?

The Turning Gate’s blog includes the FontAwesome CSS:

<link rel="stylesheet" id="fontawesome5free-css" href="https://backlight.theturninggate.net/backlight/modules/module-admin/lib/css/all.min.css?ver=6.2.3" type="text/css" media="all">

However, I’m not seeing that asset in your page source. Did you replace the HEAD section of the page with your own?

rod_barbee · January 22, 2024, 6:20pm

I also notice a missing icon in your albums in the large image display. The image menu icon in the upper right shows the unicode rather than the image icon.

have you tried clearing template cache?

rod_barbee · January 22, 2024, 6:39pm

I had a similar issue with WordPress sites not long ago. Turned out that I was using a different site url in the WordPress settings than what my Backlight site url was set to.
(mainly the difference between the subdomain url and the simpler url I assigned: ttg-tips.barbeephoto.com vs ttg-tips.com, for example) or my main site, which can be reached at barbeephoto.com or rodbarbee.com.

Anyway, I needed to reconcile those.

So I’m wondering if your Backlight site URL exactly matches the Site Address URL in WordPress general settings. e.g. http:// vs https://

Jim · January 23, 2024, 4:49pm

Are you using the latest version?

There’s no option to update the modules, so I’m assuming I do have the latest. I noticed the problem after updating a couple days ago. Here’s the main modules and versions…

module-framework 5.4.0
module-admin 5.4.0
module-designer 5.4.0
module-publisher 7.4.0
module-pages 5.0.2
custom-resources 5.3.3
pangolin-wordpress 5.0.3

I’ve tried clearing the cache and exporting the them to WP.

Turning Gate’s blog includes the FontAwesome CSS

No idea what’s going on there. I think this is the root cause.

Did you replace the HEAD section of the page with your own?

Nope. It’s all entirely being created by Backlight. I haven’t changed anything within WP (not that I can recall). Searching through all the settings in both BL and WP I don’t see how/why there’s a problem.

menu icon in the upper right shows the unicode rather than the image icon

Where? I can’t find this one. I only see this problem on the WP theme pages, not in the BL photo pages.

Backlight site URL exactly matches the Site Address URL in WordPress

They’re the same, and that hasn’t changed in years.

In Backlight the WP theme advanced option for “Font Awesome Version Support” is set to true. I also tried false (then flush/export), but it didn’t change anything. I even added flushing my site’s cache after the change.

My site’s functions.php only enqueue the BL styles for the chile theme. I also try activating the BL theme directly.

I found another problem with FontAwesome at the bottom of Jim Reekes Résumé | Jim Reekes. The 3 buttons used to have icons, but only 1 does now. There’s a ::before for the button text that was inserting an icon, but that’s also broken? I think that’s another issue about FontAwesome I don’t understand.

The only real change that’s happened in years is updating BL. I suspect I missed this change some time ago (last year?). All the caching in browsers, servers, … and I probably missed it. Just noticed it the other way when I did an BL update.

PS – hmm, seems like the site isn’t getting CSS files. In BL I created a jim-style.css but don’t find it being copied to the WP Theme. Also sounds like what Matt pointed out about the missing FontAwesome CSS file.

This is a strange clue. When I’m logged into WP the CSS files are there. But when I log out, or use a private browsing window, the CSS is missing. Chrome security biting me?

Jim · January 23, 2024, 4:55pm

Hmm, do I need to setup a free account at FontAwesome, and then download their kit, and so on and so on? I tried following what they are saying about getting fonts but I got lost. I haven’t been paying attention to them, but it seems they completely changed their world.

Do I need to use their plugin, add scripts or something? I only have a few icons I’m using.