Font Awesome not loading correctly

Resolved vaseandbloom
(@vaseandbloom)

5 years, 1 month ago
I have created a Storefront child theme in order to speed up my loading times. However, recently this has stopped loading the Font Awesome icons. When I check the icons in inspector, font-family has an “invalid property value” error because it’s Font Awesome 5 Free (exactly like that). If I edit it in inspector and wrap it in quotes, the icons display fine. The class is .wc-forward:after, .woocommerce-Button–next:after.

I have tried removing the if statement for enqueuing the woocommerce stylesheet, so it’s enqueued everywhere but that doesn’t help.

I have also tried installing the Font Awesome plugin but that makes no difference.

I’ve included the contents of my functions.php file below in case there is something obvious in there (although I know that’s not really supported in this forum), but I was hoping someone could tell me where Storefront includes Font Awesome 5 so I can fix it.
```
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

add_action('wp_enqueue_scripts','wpb_load_woocommerce');

function wpb_load_woocommerce() {

if( is_page(array( 'shop', 'basket', 'checkout' ) ) or 'product' == get_post_type() ) {
	wp_enqueue_style( 'wpb-woo', get_stylesheet_directory_uri() . '/css/woocommerce.css',  '', '3', 'all');		
	}
}

function disable_woocommerce_block_editor_styles() {
  wp_deregister_style( 'wc-block-editor' );
  wp_deregister_style( 'wc-block-style' );
}
add_action( 'enqueue_block_assets', 'disable_woocommerce_block_editor_styles', 1, 1 );
```
- This topic was modified 5 years, 1 month ago by vaseandbloom.
The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

MarieveC
(@marievec)

5 years ago

Hi, I have the same problem: font-awesome icons appears broken. I see it for the “.woocommerce-message::before” class. Everything is up to date (WP 5.7, Storefront theme and all plugins).

I don’t understand why this class is calling an icon with \e (instead of \f):

.woocommerce-message::before {
content: “\e015”;
}

I’ve bypass the problem with this CSS:
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before, .woocommerce-noreviews::before, p.no-comments::before {
font-family: “Font Awesome 5 Free”;
content: “\f06a”;
}

But now, the 5 icons (error, info, message, noreviews and no-comment) have the same exclamation mark icon. It’s okay for now but I would like the problem to be solved with a future update of the theme (if the problem comes from there).

Thanks for your help.

Niall a11n
(@wpniall)

4 years, 11 months ago

Hi @vaseandbloom,

I’m sorry we missed your post. Have you been able to resolve this issue?

If not, it looks like this Github issue might be useful for you: https://github.com/woocommerce/storefront/issues/1089.

As this question is a development topic, I’m going to leave it open for a bit to see if anyone is able to chime in and help you out.

I can also recommend the WooCommerce Developer Resources Portal for resources about WooCommerce development.

You can also visit the WooCommerce Facebook group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there too.

Thread Starter vaseandbloom
(@vaseandbloom)

4 years, 11 months ago

Hi Niall,

Thanks for your reply. No solution as yet – Font Awesome icons seem to work fine across the site (where I use Elementor), it just doesn’t work on the Storefront pages (i.e. basket and checkout).

I’ll keep working on it and update here if I get any further.

Thanks
Niall a11n
(@wpniall)

4 years, 11 months ago
Hi there,

I am sorry to hear that. I had a look at the code for your site’s basket page using my browser’s developer tools and noticed that the font-family is not set correctly:

Link to image: https://d.pr/i/WpfMIR

It currently looks like this, where the Font Awesome does not have quotes around it:
```
font-family: Font Awesome 5 Free;
```
I recommend changing to one of the following:
```
font-family: 'Font Awesome 5 Free;'
```
OR this version, which I took from the latest Storefront version on my test site (3.5.1)
```
font-family: Font Awesome\ 5 Free;
```
I noticed that your site has compressed the CSS files, which means you may have a caching plugin set up. Are you able to clear the cache then disable this caching plugin to check if the icons display correctly?

I also recommend following this guide, which explains how to set up caching plugins for WooCommerce: https://docs.woocommerce.com/document/configuring-caching-plugins/
Thread Starter vaseandbloom
(@vaseandbloom)

4 years, 11 months ago

Hi Niall,

Thanks – as you’ll see from my original post I had narrowed the issue down to the font-family css, but couldn’t find where to access/edit that in the storefront files.

It looks like it was the Page Speed Ninja plugin that was causing it, although I haven’t managed to figure out why the issue only occurred on the basket and checkout pages (or where to manually edit css within storefront). However, problem solved from my pov so marking as resolved, thanks.

Niall a11n
(@wpniall)

4 years, 11 months ago

Hi there,

You’re welcome! Glad to hear you managed to fix the problem – thanks for letting us know!

> It looks like it was the Page Speed Ninja plugin that was causing it, although I haven’t managed to figure out why the issue only occurred on the basket and checkout pages (or where to manually edit css within storefront).

Hmm, if the Page Speed Ninja plugin cached these pages, that can often cause problems for your site. I am not sure if that would explain why the CSS does not work correctly on only those pages. I suggest reaching out the plugin’s developers for further help.

If you have any further questions, I recommend creating a new thread, so we can help you out there. Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Font Awesome not loading correctly’ is closed to new replies.