On Crunchify, we always seek to improve page speed and as you may have seen in my last post, how we removed loading 9 highly downloaded resource on site.
One of the reason we were able to do that is to use FontAwesome fonts on Crunchify.
All social media icons on Sidebar, Header down arrow , post meta icons (, ), Social sharing buttons at the bottom of each page, etc all are font awesome fonts.
I don’t have to load those icons .png or .jpg separately. It’s super simple on how to add font-awesome.io fonts to any WordPress site and we would like to share steps on how to do that.
- How to Easily Add Icon Fonts in Your WordPress Theme
- Using Font Awesome in Your WordPress Theme
- install and integrate font awesome in wordpress
Let’s get started:
Step-1
Download font-awesome fonts from home page.
- Link:
https://fontawesome.com/start - Scroll down to section: Other Ways to Use
- Click on Download button
- Direct Download Link: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Step-2
Extract it to your local drive and using FTP put it into a folder under /wp-content/icon folder.
In my case here is a
complete URL: https://use.fontawesome.com/releases/v5.14.0/css/all.css?ver=5.7
Step-3
Go to your WordPress theme and enqueue font-awesome CSS to your theme. Just add below code to your theme’s functions.php file.
add_action( 'wp_enqueue_scripts', 'crunchify_enqueue_fontawesome' );
function crunchify_enqueue_fontawesome() {
wp_enqueue_style('crunchify-font-awesome', 'https://use.fontawesome.com/releases/v5.14.0/css/all.css?ver=5.7');
}
Make sure now CSS loads on your site correctly.
That’s it. You are all set.
Step-4
Now how to add Social Media and other icons into your WordPress theme? Let’s take social follow button example.
Put this code into your sidebar widget:
<div class="crunchify-social-share-sidebar"> <a target="_blank" href="https://crunchify.com/feed/" class="crunchify-social-icon-rss crunchify-social-icon"> <i class="fa fa-rss fa-2x"></i></a> <a target="_blank" href="https://twitter.com/crunchify" class="crunchify-social-icon-twitter crunchify-social-icon"> <i class="fa fa-twitter fa-2x"></i></a> <a target="_blank" href="https://www.google.com/+CrunchifyDotCom" class="crunchify-social-icon-googleplus crunchify-social-icon"> <i class="fa fa-google-plus fa-2x"></i></a> <a target="_blank" href="https://www.facebook.com/Crunchify" class="crunchify-social-icon-facebook crunchify-social-icon"> <i class="fa fa-facebook fa-2x"></i></a> <a target="_blank" href="https://www.pinterest.com/Crunchify/crunchify-articles/" class="crunchify-social-icon-pinterest crunchify-social-icon"> <i class="fa fa-pinterest-p fa-2x"></i></a> <a target="_blank" href="https://www.youtube.com/c/CrunchifyDotCom" class="crunchify-social-icon-youtube crunchify-social-icon"> <i class="fa fa-youtube fa-2x"></i></a> <a target="_blank" href="http://profiles.wordpress.org/crunchify" class="crunchify-social-icon-wordpress"> <i class="fa fa-wordpress fa-2x crunchify-social-icon"></i></a> </div> <div style="clear:both"></div>
Put this code into your WordPress theme’s style.css file:
.crunchify-social-icon{
margin: 1px 7px 5px 7px;
}
.crunchify-social-share-sidebar{
margin-bottom: 25px;
}
.crunchify-social-icon-rss{
color:#f26522;
}
.crunchify-social-icon-twitter{
color:#00aced;
}
.crunchify-social-icon-facebook{
color:#3b5998;
}
.crunchify-social-icon-pinterest{
color:#cb2027;
}
.crunchify-social-icon-wordpress{
color:#21759b;
}
.crunchify-social-icon-googleplus{
color:#dd4b39;
}
.crunchify-social-icon-email{
color:#666;
}
.crunchify-social-icon-youtube{
color:#bb0000;
}
You will be able to see nice Social Follow button on your site.
Here is a Live Example:
Some more samples:
1. Thumbs Up: <i class="fa fa-thumbs-up fa-2x"></i>
2. Heart: <i class="fa fa-heart fa-2x"></i>
You will have option to choose any icons from total ~630 fonts available out there. Let me know if you face any issue.
If you are using MaxCDN then enable Allow Cross Origin Resource Sharing error.
