How to use Elegant icon fonts for social media icons

I was using Social Media Widget plugin for displaying social media icons in this site’s navigation (earlier design).

Today I came across the just released font icons set by Elegant Themes and felt it would be lighter and more broadly useful (another post coming up) when compared with Social Media Widget plugin. I have replaced the plugin’s widget with a text widget to use these font icons.

The general process to use these font icons for social media links is given below. In this example, I am going to outline the steps to add social media icon fonts to navigation.

Step 1

Download Elegant icon fonts from here.

Step 2

Extract the zip file and upload fonts folder inside HTML CSS folder to your child theme’s directory. Rename style.css in HTML CSS folder as say, elegant-icons.css and upload this file to child theme’s directory.

Step 3

Add the following in your child theme’s functions.php:

function elegant_icon_styles() {
wp_enqueue_style( 'elegant-icon-style', get_stylesheet_directory_uri() . '/elegant-icons.css', '1.0.0', 'all' );
}
add_action('wp_enqueue_scripts', 'elegant_icon_styles');

Step 4

Wherever you want the social media icon fonts to appear, place the following sample HTML code. In this example, that would be in a text widget in Navigation Module’s sidebar.

<div class="social-icons">
<a href="#" title="Follow me on Twitter"><span class="social_twitter_circle" aria-hidden="true"></span></a>
<a href="#" title="Follow me on Facebook"><span class="social_facebook_circle" aria-hidden="true"></span></a>
<a href="#" title="Follow me on YouTube"><span class="social_youtube_circle" aria-hidden="true"></span></a>
<a href="#" title="Follow me on Google+"><span class="social_googleplus_circle" aria-hidden="true"></span></a>
</div>

Class names for displaying other icons can be seen here by going to Complete List Of Class Names section.

You would obviously replace # in the above with your social media URLs.

Step 5

Add the following at the end of child theme’s style.css and adjust to suit:

/*********************************************
Social media icons in nav bar
*********************************************/

.social-icons a:last-child {
margin-right: 0;
}

The result of all this would be: