Table of Contents
How to Add Font Awesome Social Media Icons in Blogger Website (2025 Guide)
Integrating various social media accounts to your blog through social media icons is very important in expanding your social reach. Among the major methods to do this is through adding stylish and light-weight social media icons with Font Awesome 4.7 icons. This tutorial is designed to walk you through a couple of steps to add font awesome social media icons in blogger.
Even if you are just starting out or you are very familiar with amending the blogger features, you will now be able to incorporate the Font Awesome social media icons to your blog’s sidebar, footer, or header without impacting your website performance.
Each and every one of you will be helped through this tutorial.
Introduction to Font Awesome
Font Awesome is one of the well-known icon tools that uses CSS and Less as a background. It enables the user to manipulate scalable vector icons which are alterable such as size, drop shadow, color and a lot more using CSS magic.
The reason why more users opt for font awesome 4.7 is due to its superior compatibility with older themes and templates, especially for Blogger. Regardless of other existing versions, it can be claimed that 4.7 is the most lightweight, speed efficient, and optimized for blogs with classic templates.
Would There be Any Benefits to Putting Social Media Icons from Font Awesome?
• With no images to load, only CSS, it stays light and fast.
• It can be resized, recolored, and align using simple CSS, thus making it easy to customize.
• It would provide an even better look to your blog, that is why it keeps clean and professional.
• It does work perfectly on every screen size, which makes it mobile friendly.
Step by Step Instruction: Include Social Media Icons from Font Awesome to Blogger
Step 1: Include the Font Awesome CDN to the Blogger Template
In order to use the icons from Font Awesome 4.7, it is required to first attach the CDN link to the Blogger theme.
Description:
1. Log in at Blogger.com and access the dashboard.
2. Choose your Blog, then go to Theme > Edit HTML
3. Look for </head> in the code editor.
4. Paste the following line right before the </head> tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
5. Select the option Save Theme.
This step allows the blog to have access to all icons in Font Awesome 4.7.
Step 2: Incorporate HTML code for Social Media Icons
With the connection to the Font Awesome library, the icons can be placed anywhere on the blog, be it the sidebar, footer, header or even within a post.
Example Code
This illustrates the usage of social media icons with Font Awesome.
<div class="social-icons">
<a href="https://facebook.com/yourprofile" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/yourprofile" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="https://instagram.com/yourprofile" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="https://linkedin.com/in/yourprofile" target="_blank"><i class="fa fa-linkedin"></i></a>
</div>
Change the placeholders (_blank) to bring in your social media profile links.
Step 3: Add Custom CSS for Styling
To customize your icons, add some CSS styles.
For your CSS, include the following additions:
1. In the Add CSS section under Theme > Customize > Advanced, or while editing the HTML, place the CSS before </style> or </b:skin>:
<style>
.social-icons {
text-align: center;
margin: 20px 0;
}
.social-icons a {
display: inline-block;
margin: 0 10px;
color: #333;
font-size: 24px;
transition: all 0.3s ease;
}
.social-icons a:hover {
color: #007bff; /* Change hover color */
transform: scale(1.2);
}
</style>
This adjustment will allow for the centering of the icons and interactivity upon hover while adding spacing.
Popular Font Awesome 4.7 Social Media Icon Classes
To use popular social media icon classes from Font Awesome, refer to the following sections without brackets.
For other icons, refer to this link and check the Font Awesome 4.7 Icons Cheat sheet.
| Platform | Class Name |
|---|---|
| fa fa-facebook | |
| fa fa-twitter | |
| fa fa-instagram | |
| fa fa-linkedin | |
| YouTube | fa fa-youtube |
| fa fa-pinterest | |
| GitHub | fa fa-github |
| fa fa-whatsapp |
Where Might You Position The Font Awesome 4.7 Icons?
There are various sections on your Blogger website that these font awesome 4.7 icons can be added:
• Sidebar Widget: Go to Layout > Add a Gadget > HTML/JavaScript and paste the HTML code.
• Footer Section: You can also add the code in the footer section when editing the HTML.
• Header/Navigation Bar: You can also put the icons in the header template and toggle the visibility on.
• Within Blog Post Content: Using the HTML view in the Blogger post editor, you can embed icons straight into blog post content.
SEO Suggestions for Social Media Icons in Blogger
To ensure your social media icons are aesthetically pleasing and SEO optimized:
1. Use Relevant Alt Tags - Optional: If you are using images or SVGs of the icons, it is a must to use alt tags. Note that icons are indeed fonts.
2. Add Rel Attributes: For links, ensure to add rel="noopener" and rel="noreferrer".
3. Open in New Tab: Visitors should always be retained on your site so setting target="_blank" will always be a must.
4. Increase Page Speed: Although Font Awesome 4.7 is lightweight, you need to always test your page speed using Google PageSpeed Insights.
5. Use Structured Data: Especially for business social profiles, add schema markup where it is relevant.
Troubleshooting: Why Font Awesome Icons Are Not Displaying Properly?
In case your social icons are not appearing, please do the following checks:
1. Did you include the Font Awesome 4.7 CDN link in the <head> section?
2. Are you using the correct class names, for example, fa fa-facebook?
3. Is browsing history cleared?
4. Is there any conflicting CSS code in your theme?
As we conclude
Inserting Font Awesome social media icons in Blogger is relatively easy and increases the professionalism and attractiveness of your blog. You will benefit from using Font Awesome 4.7 icons since these are lightweight and reliable, ensuring modern design and fast loading.
No matter where you are positioning the icons, in the sidebar, footer, or at the header, just follow the steps in this guide and you will have stylish and functional icons within minutes.
Increase the attractiveness of your blog by polishing it, while also ensuring that each icon is linked to your official profiles for enhanced social presence.
){kind=link}