Archived topic
Adding Font Awesome
11 replies · Started by Sridhar on May 31, 2018
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;
}You're correct - I just updated the code.
Thanks! :)
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?
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 :)
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
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.
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.
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
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. :D
The 6 FA icons are there for backward compatibility in case some users didn't switch to SVG yet :)
Hello,
Do you have a tutorial to make the change?
Thank you!
Any chance you can open a new topic for your question?
Thanks :)
