Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Font Awesome vs SVG

Home Forums Support [Resolved] Font Awesome vs SVG

Home Forums Support Font Awesome vs SVG

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #204802
    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.

    #204848
    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 5 years, 5 months ago by Ramesh Srinivasan. Reason: link formatting
    #204923
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #204937
    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 πŸ™‚

    #204939
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #204940
    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

    #204941
    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;
    }

    #204984
    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.

    #204999
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #205017
    Ramesh Srinivasan

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

    #205101
    Tom
    Lead Developer
    Lead Developer

    One of the struggles of releasing updates to a theme used by so many people πŸ™‚

    #219787
    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?

    #219828
    Tom
    Lead Developer
    Lead Developer

    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.

    #314522
    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!

    #314539
    Tom
    Lead Developer
    Lead Developer

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.