Social Follow Icons Using WordPress Dashicons

These are “social media follow buttons”, which are just icons that link to your social media profiles. But instead of regular icons, these use WordPress dashicons. This includes social follow icons for Google+, Twitter, Facebook, and YouTube.

Step 1
Load the dashicons stylesheet in the footer for faster page-speed. You can load it in the footer by adding this somewhere in the body of your HTML, as in your footer.php.

<?php wp_enqueue_style( 'dashicons' ); ?>

Step 2
Add this CSS to your stylesheet:

 .isa-di .dashicons {
    margin:10px;
    line-height: 1;
    width: 42px;
    height:36px;
    color:#fff;
    padding:3px;
    vertical-align:middle;
}
.isa-di .dashicons:before {
    -webkit-font-smoothing:antialiased;
    font:400 30px/1 dashicons;
    line-height: 38px;
}
.isa-di .dashicons.di-facebook {
    margin:0;
}
.isa-di .dashicons.di-facebook:before {
    content:"\f304";
    font-size:52px;
}
.isa-di .dashicons.di-twitter:before {
    content:"\f301"
}
.isa-di .dashicons.di-gplus:before {
    content:"\f462"
}
.isa-di .dashicons.di-youtube:before {
    content:"\f236";
    font-size:60px;
}
.isa-di .dashicons.di-facebook {
    color: #3B5998;
}
.isa-di .dashicons.di-twitter {
    background-color:#00aced;
    border-radius:2px;
}
.isa-di .dashicons.di-gplus {
    background-color:#dd4b39;
    border-radius:2px;
}
.isa-di .dashicons.di-youtube {
    color:#bb0000;
}

Step 3

Paste the following HTML where you want the social follow icons to appear on your site. Be sure to replace “YOUR_GOOGLE+_PROFILE_ID”, “YOUR_TWITTER_USERNAME”, “YOUR_FACEBOOK_PROFILE_ID”, and “YOUR_YOUTUBE_ID” with your own social profile ids.

<div class="isa-di">
<a class="dashicons di-gplus" href="https://plus.google.com/YOUR_GOOGLE+_PROFILE_ID" title="Follow me on G+"></a>
    
<a class="dashicons di-twitter" href="https://twitter.com/YOUR_TWITTER_USERNAME" title="Follow me on Twitter"></a>
    
<a class="dashicons di-facebook" href="https://www.facebook.com/YOUR_FACEBOOK_PROFILE_ID" title="Follow me on Facebook"></a>

<a class="dashicons di-youtube" title="on YouTube" href="https://www.youtube.com/user/YOUR_YOUTUBE_ID"></a>
</div>