Font Awesome icons (by Dave Gandy) are an easy way to add simple social media icons to your blog without having to separately purchase and install images.
If you were directed here because you downloaded one of my Blogger templates, then you can skip down to section 2, where I talk about how to add code to your new HTML gadget.
How to Load Font Awesome Stylesheet into Blogger
1. Edit your Blogger template HTML code just above the closing head tag </head>. Add this bit of code:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
How to Add Icons to the Blogger Sidebar
1. After installing one of my Blogger templates, go to Layout.
2. Add a new gadget in the sidebar.
3. Select HTML/Javascript to add the gadget to your sidebar.
4. Edit this new gadget. In the new pop-up window that appears, first copy and paste the <div> section below (in GREEN).
5. Where it says “INSERT EACH SOCIAL MEDIA ICON CODE HERE”, that’s exactly what you’re going to do! Highlight that text so that you can overwrite it. Be sure not to touch the end </div> tag.
6. Copy and paste the various examples you want to use in your widget into the box in place of that highlighted code, and save your changes. I have included the most common examples below, such as Facebook, Twitter, and Pinterest, but there are hundreds of options! See the full library of Font Awesome icons here.
7. Be sure to replace the account-specific code (in BLUE below) with your own IDs and handles.
8. Once you have saved your changes, the icons will now display and be linked to your social channels in your sidebar. If you are using one of my templates, the social icons will already be sized and color-coded to match the rest of your purchased design template.
Example Code (Common Options)
<div id="socialmedia" style="text-align: center;">
INSERT EACH SOCIAL MEDIA ICON CODE HERE
</div>
<a href="http://www.twitter.com/uglyducklingDIY" target="_blank" title="twitter">
<i class="fa fa-twitter fa-2x"></i>
</a>
<a href="http://www.facebook.com/uglyducklinghouse/" target="_blank" title="facebook">
<i class="fa fa-facebook fa-2x"></i>
</a>
<a href="http://www.instagram.com/uglyducklingDIY" target="_blank" title="instagram"> <i class="fa fa-instagram fa-2x"></i> </a>
Bloglovin’
<a href="http://www.bloglovin.com/en/blog/3889704" target="_blank" title="bloglovin'">
<i class="fa fa-heart fa-2x"></i>
</a>
<a href="http://www.pinterest.com/uglyducklingDIY/" target="_blank" title="pinterest"> <i class="fa fa-pinterest fa-2x"></i> </a>
Leave a Reply