[Resolved] Adding Font Awesome

[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;

}

[Tom]

You’re correct – I just updated the code.

Thanks! 🙂

[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?

[Leo]

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 🙂

[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

[Tom]

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.

[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.

[David]

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

[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. 😀

[Leo]

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

[Pedro]

Hello,

Do you have a tutorial to make the change?

Thank you!

[Leo]

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

Thanks 🙂

[Author]

Posts