Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Adding Font Awesome

Home Forums Support [Resolved] Adding Font Awesome

Home Forums Support Adding Font Awesome

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #588635
    Sridhar

    Hi,

    Not a support request but just want to mention a possible improvement in the docs.

    https://docs.generatepress.com/article/font-awesome/ suggests hooking to wp_head. While it works, wp_enqueue_scripts is the recommended hook to use.

    As far as I know, this is a better approach:

    add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );
    /**
     * Enqueue Font Awesome.
     */
    function custom_load_font_awesome() {
    
        wp_enqueue_script( 'font-awesome-free', '//use.fontawesome.com/releases/v5.0.13/js/all.js', array(), null );
    
    }
    
    add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );
    /**
     * Filter the HTML script tag of <code>font-awesome</code> script to add <code>defer</code> attribute.
     *
     * @param string $tag    The <script> tag for the enqueued script.
     * @param string $handle The script's registered handle.
     *
     * @return   Filtered HTML script tag.
     */
    function add_defer_attribute( $tag, $handle ) {
    
        if ( 'font-awesome' === $handle ) {
            $tag = str_replace( ' src', ' defer src', $tag );
        }
    
        return $tag;
    
    }
    GeneratePress 2.1.2
    GP Premium 1.6.2
    #588971
    Tom
    Lead Developer
    Lead Developer

    You’re correct – I just updated the code.

    Thanks! πŸ™‚

    #874452
    George

    Hi, thank you for sharing this. New to Generatepress. Where do I add this code?

    And then once it’s loaded, do I just use the cheats?

    #874464
    Leo
    Staff
    Customer Support

    Click on the PHP link here:
    https://docs.generatepress.com/article/font-awesome/#font-awesome-5

    What do you mean by the cheats? It would just be HTML as FA provided on their site.

    Let me know πŸ™‚

    #874475
    George

    Thanks, sorry, I meant the html from FA cheat sheet.

    https://fontawesome.com/icons?d=gallery

    I went ahead and added the FA plugin. Hoping it doesn’t add too much bloat to the site, e.g., not slow it down much.

    If there’s a better way to add their CDN without compromising site speed, please advise if you know. Thank you.

    George

    #874576
    Tom
    Lead Developer
    Lead Developer

    I would suggest building your own icon font using a tool like IcoMoon: https://icomoon.io

    Or, you can use SVGs instead of a font.

    Loading Font Awesome in its entirety is definitely not great for performance.

    #1144411
    Matthias

    i am rebuilding our old company page with current wordpress (still running wp 4.3 with total template). Total had fontawesome font files (ttf, otf, woff etc.) in wp-content/themes/total/fonts.
    GP also has fontawesome in that directory.

    In our old template you had an option to add social media links to the top bar – and the icons were taken from fontawesome.

    I found a video where you just added a menu entry in gp using custom links and adding fontawesome icons via e.g. <i class=”fab fa-xing”></i>

    As i would only need 3 icons – xing, linkedin, twitter (maybe sometime later another 1-2 (but not more, and no blogging with comments etc) – would you recommended using font awesome – or svg, an iconset like you linked above?
    Still i wonder why there is fontawesome coming with gp then πŸ˜‰ – if it is not great for performance.

    #1144523
    David
    Staff
    Customer Support

    Hi there,

    wherever possible i would use SVG or a custom icon font over FA.

    In the past GP used a FA for the theme icons.
    So only reason why GP would use them is on an old legacy install – definitely not on a new site πŸ™‚

    Instead it has its own Icon font or better still you can switch to SVG in Customizer > General

    #1144719
    Matthias

    ehm? i checked that before asking πŸ˜‰ – in the current download – gp2.4.1 you can find 6 fontawesome files in the /font folder πŸ˜‰ – and i just installed new with that some weeks ago. So definitelly a new site since i only started using gp since the latest version is out.

    Thats why i wondered why fa is still there πŸ˜‰ – dont know if they are used. But they are there.
    But if you recommend i will try to add svgs to my header instead
    btw if you know a good svg source with social icons like fa uses – i wouldn’t mind
    I might ask you how to get them into my header if i can’t manage that though. πŸ˜€

    #1144859
    Leo
    Staff
    Customer Support

    The 6 FA icons are there for backward compatibility in case some users didn’t switch to SVG yet πŸ™‚

    #1506679
    Pedro

    Hello,

    Do you have a tutorial to make the change?

    Thank you!

    #1506702
    Leo
    Staff
    Customer Support

    Any chance you can open a new topic for your question?

    Thanks πŸ™‚

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