FontAwesome & Custom Fonts Not Working

Support
#1

Hi Apex,

I’m again having issues with both FontAwesome and a custom icon font on a clean install of X Theme.

1. FontAwesome
FontAwesome will load using, for instance but, after saving, the code is stripped from the Wordpress text box and replaced with   (a space).

Per earlier posts, I have updated the library to the most recent one, by adding the following to the functions.php file of the child theme:
add_action( ‘wp_enqueue_scripts’, ‘custom_load_font_awesome’ );
/**

}

2. Custom Icon Font Issues
I have tried adding a custom font by both of the methods found in the help documentation:
a. Adding as a Custom Font Library under Theme Options > Settings > Fonts after adding code to allow for upload of .woff files in the functions.php file of the child theme. The font uploads and is shown as ‘Font 3’ but the preview shows a regular alphabet, not icons, and I cannot find any instructions as to how to call it as I do not intend using it as the default body nor headings font. I have tried using ‘Flaticon’, ‘Font 3’ and ‘Custom Font Family’ as the font-family inline in text boxes but to no effect.
b.Uploading the svg, woff, woff2 and ttf fonts into a Fonts folder in the wp-content folder of the child theme, and then adding CSS that I’ll list in a private follow up. Again, this has no effect as you can see on our home page.

As you can tell from this post, we have spent a great deal of time trying to figure this out to no avail, and this has a significant knock on effect on our business as we cannot make our site live, so any help you are able to give us asap would be much appreciated.

Regards,

Nicola

#2

Hi Nicola,

I’ve just created a test page then added some FontAwesome icons, they’re working fine:

Please make sure you switch to HTML editor instead:

Your custom CSS for the font face looks good. Upon checking your website, I could see that you’ve not uploaded the font files(eot, woff, ttf, …) to the x-child/fonts/ directory.

Could you please upload them again?

Let us know how it goes!

#3

Thanks for the fast reply.

Disappointing that the code only remains when using Gutenberg, not an editor that we’re looking to switch to, horrible UI.

For the custom font, the eot, woff, woff2, ttf files are all uploaded into the same folder as the .svg one, not sure why you can’t see them.

We added some css to define a class for the icon font, and that seems to have worked, but we’d again be constrained to using Gutenberg for every page, which is incredibly limiting.

Overall, if the bottom line is that it’s Gutenberg or nothing to get this functionality, we’re going to have to rethink the project.

Thanks for your help regardless.

#4

Hey Nicola,

I believe Thai wasn’t exclusively referring to Gutenberg code editor. You can do that in the HTML editor of Cornerstone’s Text element as well.

Please note that though the Custom Font feature of the Font Manager can accept font icons, it won’t work because you can’t display font icons like regular text. It needs a special syntax.

In case you haven’t tried yet, I’d recommend that you give the Cornerstone Custom Icons plugin a shot. Just note that it is a third party plugin so it’s not covered in our product support.

Thanks.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.