[Resolved] Font Awesome vs SVG

[Ramesh Srinivasan]

Hi Tom,

I’m thinking to remove Font Awesome from my site as I’m not using it much (except the search icon in the Menu bar). Can I replace FA search icon with the PNG/SVG version from here, and remove the FA CSS altogether? If so, how do I replace that particular icon.

Thanks.

[Ramesh Srinivasan]

I got the “dequeue” part from the code here and it works just fine.

Now, only looking for info on how to replace the FA search symbol with a static PNG or SVG icon.

• This reply was modified 6 years, 11 months ago by Ramesh Srinivasan. Reason: link formatting

[Tom]

The easiest way to do this is to load only the essential icons that GP uses:

add_filter( 'generate_fontawesome_essentials', 'generate_fontawesome_essentials' );
function generate_fontawesome_essentials()
{
    return true;
}

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

So instead of loading the entire Font Awesome library, you’re loading a handful of icons that GP requires for certain things (back to top button, next/prev posts, search, mobile etc..).

Let me know if that helps or not 🙂

[Ramesh Srinivasan]

Tom,

Thanks for the response. I’m trying to eliminate FA completely, in order to improve page load times; FA fonts take 1 GB of bandwidth per day (though there are free FA CDNs) and the TTFB seem to be high for font files when loading from AWS Cloudfront.

If eliminating FA is a difficult thing to do .. involving core theme modification in several files, then I’d better leave it the way it is right now.

If your method can help reduce the file size then that would be great. Every website/theme is using FA these days… but may be I’m old school 🙂

[Tom]

The method above will dramatically reduce file size.

For example, the SVG file for the full Font Awesome is 383KB.

The SVG file for the GP essentials is 7KB.

Big difference 🙂

[Ramesh Srinivasan]

That’s great. So I guess none of the following files would be needed then?

fontawesome-webfont.woff2
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff

[Ramesh Srinivasan]

Would these two functions should to the trick?

add_action( ‘wp_enqueue_scripts’, ‘generate_custom_scripts’, 10 );
function generate_custom_scripts() {
wp_dequeue_style( ‘fontawesome’ );
}

add_filter( ‘generate_fontawesome_essentials’, ‘generate_fontawesome_essentials’ );
function generate_fontawesome_essentials()
{
return true;
}

[Ramesh Srinivasan]

That works fantastic. What a brilliant tip..
Just what I was looking for all these days
Thanks so much again 🙂

Suggestion: Can you make it the default setting and provide an option to enable it? Can boost your theme speed further..means lot more people would turn to GP. IMO.

[Tom]

Only this function is necessary: https://generatepress.com/forums/topic/font-awesome-vs-svg/#post-204923

Unfortunately I can’t make it default, as people who are using other icons (me for example on the home page here) would lose their icons.

I am going to be making it an option though so you can choose between the two in the Customizer 🙂

[Ramesh Srinivasan]

That makes sense. I only realized that after posting my comment. Was only thinking about “new” / out of the box setup.

[Tom]

One of the struggles of releasing updates to a theme used by so many people 🙂

[John]

Tom, is there somewhere we can see a list of the GP essential icons?
And if it turns out I’d need just a few other icons, can the essentials filter be customized?

[Tom]

Hmm, there’s no currently.

They can’t be filtered, as I built a font pack which only includes the essentials.

You would need to build your own pack and include them in a child theme.

[John MacKenzie]

Hi Tom

I added this code to my child theme functions.php file
https://generatepress.com/forums/topic/font-awesome-vs-svg/#post-204923

cleared my caches and when i run the pingdom test its still loading a 83KB file for fontawesome, what am i doing wrong here?

thanks!

[Tom]

It could be from a plugin you’re using. Can you link me to your site?

[Author]

Posts