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.
Let's Get Started
Paste the following code into the <head> section of your site's HTML.
[*]</link>
Now Use of Font Awesome Codes.
<i class='fa [color=red]fa-certificate[/color] fa-stack-2x [color=#38761d]fa-spin[/color]'>[/i] <i class='fa [color=#bf9000]fa-flickr[/color] fa-stack-1x [color=magenta]fa-inverse[/color]'>[/i]
- 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:
Now change the color of the Icons with below simple CSS. Replace Red color with any other color.
<style>#DD_Font_Awesome a {color:[color=red]red[/color];}</style>
Thank you for patronizing Design Blaster. 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.
Animated Stylish Social Icons without CSS/JS
Reviewed by akb48ma
on
16:28
Rating:
Reviewed by akb48ma
on
16:28
Rating:
No comments: