Animated Stylish Social Icons without CSS/JS

Tuesday, 10 March 2015

Animated Stylish Social Icons without CSS/JS

We all want stylish-animated Social Icons for our site. Icons that represent our social stat or way to find it. But if we want stylish icons then it comes with heavy CSS codes that's low down the site's loading time. Similarly if we add animated social icons then again we need to add CSS and JavaScript Codes in our site. Every site visitor want simple but stylish site with less loading time but these icons works opposite. We all know about Font Awesome Icons. If you are using any latest Blogger Template then the template have must be used Font Awesome Icons for sharing, etc. Or, if not the you can easily add Font Awesome Icons in your Site. My this codes are work with Font Awesome Icons. Check demo first.

Check Demo
Let's Get Started

Paste the following code into the <head> section of your site's HTML.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></link>

Now Use of Font Awesome Codes.

<a href='LINK'><span class='fa-stack fa-lg'><i class='fa fa-certificate fa-stack-2x fa-spin'></i>
<i class='fa fa-flickr fa-stack-1x fa-inverse'></i></span></a>

Blue (LINK) - Link or URL. Replace it with any of your Social Media Link like Facebook Page Link or Twitter Link, etc.
Red (fa-certificate) - Background Icon. This is the Background Icon. Some of the Icons you can used are, fa-circle, fa-square, fa-stop, fa-certificate, fa-square-o, fa-circle-thin
Green (fa-spin) - Animation Code. There are two animation codes that you can use are, fa-spin and fa-pulse.
Yellow (fa-flickr) - Social Icon. Use any Social Font Awesome Icon.
Pink (fa-inverse) - Remove it if you are using hollow background icon. Remove this code if you are using these two codes, fa-square-o and fa-circle-thin.

Troubleshooting

Because the color of the icons default of your site link color that's why sometimes color of the icons doesn't look good. It is also good if the icons is in <center> code. So here is the example:

<center>
<div id='DD_Font_Awesome'>

<!-- Social Icon Codes here -->

</div>
</center>

Now change the color of the Icons with below simple CSS. Replace Red color with any other color.

<style>#DD_Font_Awesome a {color:red;}</style>

Thank you for patronizing Design Devta. I am sure your visit to us must be quite satisfying and in line with your expectations from us. Just in case, it's not as you expected from us or if you are facing any problem, kindly forward your feedback's directly to us by leave a Comment below or using our Contact form. And, get assured response from my side. Your feedback's and suggestions are extremely valuable to us. Please, if you like our this post then share on your social network. Assuring you of our best service always.