 |
Add Font Awesome Icons To Blogger |
The blog layout is much important in term of design either for individual or a corporate blog. Bloggers can design social share buttons for blogs by using Font awesome icons that play a very important role to boost blog traffic. Font awesome icons (font awesome cdn) use CSS styles to be more attractive and beautiful. Moreover, their working as simple and fast as you can imagine. Surely you have ever seen some websites with amazingly decorated social icons without using any image because images are responsible to reduce the blog loading speed. On the other hand, font awesome do not play any role to make your website slow. The good thing about font awesome is that these are absolutely free and easy to apply on anywhere throughout the blog.
I am sure every blogger want to make his blog attractive by different ways i.e by adding stylish news widget etc. Some prefer to make author's comment box prominent. No one can deny the importance of social media because no website can get higher rank without connecting with social websites. Most of the traffic is obtained through these social website such as Facebook, Twitter, Google Plus, YouTube and so on. You can get their SEO juice by making back-links to increase your blog's rank. Now the Google updated its algorithm according to which only that blogs can be indexed effectively which are getting remarkable traffic from social websites on daily basis. Therefore, it is necessary to pay some heed to your social share icons to attract the visitors.
Note:
I already posted a detailed article on how to add font awesome icons to blog navigation in which detailed description is available for enabling CSS Style Sheet in blogger to support font awesome icons. If you already read that article then move below to "Add Social Icons To Blog".
Why Font Awesome Icons
As I already said that font awesome icons are the best alternate to images used for menus and social icons. These icons are vector image that are very tiny and free of any burden. Therefore, these will not reduce the blog loading speed. Moreover, these icons enhance the charm and attraction of navigation bar and social share icons. Despite of these amazing features, all font awesome icons are absolutely free and you do not need to pay any charges. Today, almost every developer try to add font awesome icons in his website due to their unique features.
Get Font Awesome Icons
- Go to the official website of font awesome icons to get complete list of all categories.
- Click on any icon to get its code.
- For example, if you click on "bicycle" icon, it will give you this code:
 |
Font awesome icons for blogger |
You can skip aria-hidden="true", using only <i class="fa fa-bicycle"></i>
Enabling CSS Font Awesome Icons In Your Blog
- First of all, make sure that your blog must have CSS Style Sheet to support all the font awesome icons. For this purpose, go to "Template" >> "Edit HTML".
- Click anywhere in code and press "Ctrl + F" (Mac users should press "Command + F")
- A search bar will appear. Write font-awesome.min in this bar and hit enter.
- You will find the following link if style sheet is already to your blog.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
- If it is not added then you can copy and paste the above mentioned code under <head> tag in your template.
 |
Font awesome social icons |
Add Social Icons To blog
First of all we will add desired social icons in the side bar of our blog, then we will customize it according to our own wish using small CSS codes. So, here is the step by step guide to achieve this goal.
- Go to the blogger "Layout" and click "Add a Gadget" on sidebar.
- A new window will open. Here, choose "HTML/Java Script".
- Copy the code below and paste it to the gadget. Give tittle "Social Icons" or something else you want.
<div id="fawesomeicons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="URL-HERE" title="Bloglovin" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
<a href="URL-HERE" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a>
</div>
 |
Font awesome social icons |
- Click "Save", reload your blog and see the results. We will see an addition of social icons as shown in picture below.
 |
Font awesome social icons |
- You can remove any icon by deleting related line starting from <a href=" to the </a> at the end of that line.
- Replace "URL-Here" with the URL link of your social account.
Customize Added Social Icons Using CSS
So, we have successfully added the desired social icons in our blog. Now we should move towards some CSS fun to make these icons more attractive and beautiful.
- Go to "Template" >> "Customize".
- Now navigate to "Advance" >> "Add CSS" as shown in image below.
 |
Social Icons CSS |
Following are some different CSS codes with the picture of their resulting icons. Copy these codes one by one and paste in "custom CSS" as shown in above picture.
Code#1:
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: #background-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}
Code#2:
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: #background-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: #hover-color;
}
Code#3:
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid #border-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}
Code#4:
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid #border-color;
color: #font-color;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: #hover-color;
}
Code#5:
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
color: #font-color;
display: inline-block;
font-size: 23px;
margin: 0 6px 6px;
}
#fawesomeicons a:hover{
background: #hover-color;
}
Modifications
- All the above mention codes have some line highlighted in red color. You will replace these lines with your desired color. (Unlimited color scheme codes can be obtained from this website.)
- You may also change the font size and box size of all social icons.
Bottom Line
All of the above detail is game about to add beautiful social icons in your blog with the use of font awesome icons. It will make your blog attractive for users to use these buttons and share your content. You may feel free to ask any question in this regard. Share your experience with others in comments. Keep visiting this page for more latest articles. Thanks 😊
great guide on how to design social share buttons and add them to your blog! thanks for sharing!
ReplyDeletespanish to english