Font Awesome not loaded on some pages

Hi, for some reason Font Awesome is not loaded on some pages. There’s no clear pattern where it is loaded. E.g. it is loaded on home, faq and track order pages, but not on shop, single product, account and most other pages.
There are no errors in console, no problems with HTTP/HTTPS, CORS policy etc., no failed resources in network tab.

Hello,

It seems that you have disabled the “Font Awesome library” option that is situated in Theme Settings -> Performance -> Fonts & Icons -> Font Awesome Library -> Set it to always use.

https://monosnap.com/file/C4eCIRAYDqFT0744CwmQADxkL2Ns9V

Without this option, icons are loaded on pages where elements of the WPB Builder are displayed that have some icons.

If you would like to discuss further issues, our customer support team is here for you.

Kind Regards

Yes, font awesome is set to “don’t use”. I used same setup for previous project based on Woodmart and Font Awesome was loaded there on every page. If I understand you correctly you say that it is not supposed to do so (load on pages where there are no WPB elements with FA icons)?

Also do I understand correctly that FA loading is triggered only if there are some WPB elements with FA icons. If there’s som icons outside of WPB font won’t be loaded?
I am using FA incons in footer copyrights section.

[horny_fungus]

I found a page where there are some font awesome icons uded inside WPBakery element and font is still not loaded.
There’s another strange thing – despite the font is not loaded, one glyph (envelope) is rendered. Can it be shown from Woodmart font (AFAIK it is included there)?

Here’s the code I use for the envelope icon:
<i class="fa fa-envelope-o" style="color: #333333; font-size: 22px;" aria-hidden="true"></i>

There’s also Instagram icon on the page which is also contained in Woodmart font but it’s not shown. Here’s it’s code:
<i class="fa fa-instagram" style="color: #333333; font-size: 22px;" aria-hidden="true"></i>

• This reply was modified 2 years, 11 months ago by horny_fungus.

Hello,

1. I said that without an active Font Awesome Library, the icons will load on pages where WPB elements have some icons (e.g if the WPB element has icons on the home page, then the whole page can load them).

2. Yes, you right understood. The icons will not be loaded on the pages that don’t have any WPB elements that have icons.

Kind Regards

Please address my previous message – https://xtemos.com/forums/topic/font-awesome-not-loaded-on-some-pages/#post-345440

Also can you please share how can I use Woodmart Font glyphs as it seems most popular icons are included there. I tried using some classes like .social-instagram .wd-icon but without success.

Hello,

Woodmart icons cannot be used in the same way as icons of the font awesome, they cannot be called by using a class as in the font awesome. Because woodmart icons are not an alternative to the font awesome.

“woodmart-font” is a set of functional icons used in our CSS, they are called directly on their Unicode in various places of a theme beginning from a mobile bottom bar, filters of the shop, header, and finishing with elements of the builder.

In places not intended for this purpose in advance, these icons can be used only with the help of the custom CSS code.

If you want to insert an icon from our font in a certain place, you must first explain in detail what and where you want to use and if this can be done, we will prepare a custom code.

Kind Regards

FYI – FA code works as is for envelope icon.

I need following icons code: envelope, instagram, pinterest, facebook.
Image for clarification (some of these have 2 different icons) – https://paste.pics/61527c847bfdef818d5190522d156fbe

I am going to use the icons inside text element in general page content and in footer (html block).

[Luke Nielsen]

Hello,

Here are the codes of icons that you mentioned from the font “woodmart-font”.

envelope-o - "\f132"
pinterest - "\f156"
instagram - "\f163"
facebook - "\f180"

If there’s anything else we can do, please get in touch.

Kind Regards

• This reply was modified 2 years, 11 months ago by Luke Nielsen.
• This reply was modified 2 years, 11 months ago by Luke Nielsen.

1) Can you please provide me with some example code how I can use the icons.
2) Can you please explain why the envelope icon works as is via FA code without FA?

Hello,

1. The code of icons should be in the content value and also with the “woodmart-font” font family.

.tab-title-description:before {
    content: '\f132';
    font-family: "woodmart-font";
}

https://gyazo.com/3f0ffe7bb6332a8515940d1bb25627ad

2. It isn’t FA code, it is Unicode. Unicode is the universal character encoding and it covers all the characters for all the writing systems of the world, modern and ancient. It also includes technical symbols, punctuations, icons and many other characters. In our case, we also use this character encoding for icons as is FA.

If there’s anything else we can do, please get in touch.

Kind Regards

I found why envelope icon works as is. In your style.css there’s following code:

body .fa.fa-envelope-o,
body .fa.fa-copyright,
body .fa.fa-location-arrow,
body .fa.fa-mobile {
  font-family: "woodmart-font";
  font-weight: 400; }

body .fa.fa-envelope-o:before {
  content: "\f132"; }

body .fa.fa-copyright:before {
  content: "\f173"; }

body .fa.fa-location-arrow:before {
  content: "\f160"; }

body .fa.fa-mobile:before {
  content: "\f159"; }

So I used similar code for other icons and they are now working as well with native font awesome code.
But there’s one more question – I want to add a few glyphs to Woodmart font, what’s the best way to substitute original one with modified from child theme?

Hello,

Sorry, but there’s currently no way to substitute original glyphs in the “woodmart-font”, we appreciate you taking the time to let us know what you’re looking for.

If you still have further questions, please don’t hesitate to reach out.

Kind Regards

You misunderstood me.
I already inserted the needed glyphs into Woodmart font.
I am asking how I can substitute original version of font with modified one.
Like using wp_deregister_style / wp_register_style or some other solution.

Hello,

Unfortunately, there is no such code that you can just add to the child theme to replace this font. However, you can disable it manually by going to the woodmart/inc/classes/Themesettingscss.php file and on the 320 line remove or comment the return $output; value.

https://monosnap.com/file/piFhH6Nrn5ImoI1V0iliawyX0rdhFB

Also, after these actions resave Theme Settings.

https://monosnap.com/file/jK97RfTwUgT3XHFluoYWq7soJegeuh

Kind Regards

Can you please consider adding a filter to this function to let users alter the location of the font via child-theme functions.php?

Hello,

The Themesettingscss.php file uses a class system that is not supported in the child theme, therefore, adding a filter will not help to make any changes via the child theme.

Let me know if there’s anything else I can assist you with.

Kind Regards

OK, maybe not through child theme but through Code Snippets. I don’t get why such a filter would not work as many other filters widely used in PHP?

[Luke Nielsen]

Hello,

Filters in the Themesettingscss.php file are class-bound so they cannot be called in files that don’t have a class system (also such filters cannot be called by any plugin like Code Snippets because they working with the functions.php file that doesn’t have a class system).

If you have any more questions or come across any other issue, let me know, I’ll be happy to help.

Kind Regards

• This reply was modified 2 years, 10 months ago by Luke Nielsen.

[Author]

Posts