How to Add Font Awesome Social Icons in Blogger

Nowadays, it is almost impossible to have a blog or website without at least one social media account. Whether it's Twitter or Facebook, Instagram or Pinterest , or all of them, it's becoming increasingly clear that social media can help you build your online presence.

Gone are the days when you could only rely on search engine results. Today, you can't rank well with keyword results on Google or any other search engine, but you can run a social media campaign to get the results you want.

Basically, your website and social media should go hand in hand. In other words, one cannot exist without the other. Social media is one of the best traffic engines online, and if you want to increase your visibility, you should get an account on one or more platforms that complement your brand identity.

Make your presence known on social networks

Once you create your social media accounts, you won't neglect them. Sure, you can use hashtags and target industry leaders , but that's not enough to create awareness among your customers. You should use real estate on your website to let people know you have a presence on Facebook, Twitter, Instagram, Vine, or Pinterest.

How exactly do they do it, you ask? Well, through social icons.

Social icons are small images that represent a symbol associated with a particular social network. For example, social icons on Twitter usually have a blue bird. Otherwise, T.

The presence of these images reminds your audience that there are other ways to learn about everything you post. Nowadays, the use of social media is due to the media and exciting situation. And maybe not, your audience wants to know where you are on social media.

If you are on the Blogger platform, you can add these social media icons using Font Awesome Social Icons .

What is the amazing font?

Font Awesome "gives you scalable vector icons that can be instantly customized: size, color, shadow, and anything else that can be done with the power of CSS." In short, it works as a toolkit where you get 500+ free icons to use on your website.

Now, if you've ever used social media icons, you know there are non-vector varieties. But Awesome Fonts offers scalable vector icons and is a great long-term choice for your site.

Why is this happening?

Well, the very good reason is that images take a long time to load . Yes, these images are small, but the point remains. Also, when the computer resolution is increased, the images lose quality. In other words, if you want your icons to load quickly and look nice, clean, and crisp, you're better off using a collection of awesome fonts. Also, the ability to customize your icons accordingly is definitely an attractive factor.

Why should you start using Font Awesome?

With so many providers, why stick to fancy letters?

• A large collection of icons . Here you will find not only social media icons but also other traditional icons.
• CSS support . With CSS, you can adjust the icons to better fit your website. You can paint with colors, shapes, shades and other elements. This is something that many non-vector images miss, sticking to the icon of your choice
• Vector speed images load quickly because they are lightweight.
• You don't need to pay anything when you use awesome free fonts .

So now that you know the importance of icons on your website, it's time to learn how to add awesome font icons to your blog .

Added awesome social icons to blogger font

Adding icons to your blog is not rocket science. In fact, the process is very simple.

Here's what you need to do:

Add an awesome font page to blogger

Follow the steps below to get Font Awesome working with your blog:

1. Log in to your Blogger dashboard, go to Themes and click the Edit HTML button
2. Click anywhere in the code box and press CTRL+F to open the search box.
3. Sign in Type a tag in the search box and press Enter to find it.
   
   
   
4. Add a line of code that sets the location below the font-awesome.min.css stylesheet calculation
   

5. Click the "Save Theme" button to save your changes and start playing with awesome fonts!

Use amazing fonts

After following the steps in the previous section, you are ready to use awesome fonts on your blog. The first thing you need to do is add the social icons to your HTML and remove the icons you don't want.

Here is an example of the HTML code you can add:

In the HTML code above, we can see 8 different social icons, which can be identified by looking at the title attribute of the link. For example, the first one is for Facebook.

To use social icons , paste your URL where it appears in the URL of each social icon you want to include . Enclose the link in quotes and make sure no quotes are omitted.

If you want to remove the social icon, remove the line of code starting with "".

Now remember that Font Awesome is designed to work with inline elements, so it works with tags anywhere. Although you can use , the official document prefers the short option.

Font Awesome icons can be placed anywhere using a CSS prefix with the icon name. For a list of social media icon names , you can visit the official Font Awesome website.

Let's say you want to display a YouTube icon in order to link it to your official account on the platform. Find the YouTube icon in the list and click on it:

This will take you to a page where you can view this code on YouTube:

To add the icon to the list, copy each line of code above starting with ", paste it where you want, and replace the code starting with "" for the icon you want.

Finally, after adding the icon, the list will look like this.

Note: Don't forget to edit the title and add your URL in quotes.

Once you're done editing the icons, insert the code into the HTML/JavaScript widget by going to "Page Frontend" and clicking the "Add Widget" link. If you're using WordPress, paste it into the text widget.

Customize awesome fonts using CSS

Let's say you want to make the icons much larger than they currently are. This task is made easier by using CSS. Here is the sample code:

#awesomeicons {
font-size: 16px;
width: 30 pixels;
height: 30px;
row-height: 30px;
}

Increase or decrease the value by 16 pixels to change the font size. The width and height values ​​of the bottom object (30 pixels) still match. Increasing/decreasing these values ​​will increase/decrease the size of the container containing the font.

Here are the different Font Awesome social icon styles. Search for #background-color , #border-color , #font-color , and #hover-color text to find where to place the color code in CSS. You can use this tool to generate color codes: Color Code Generator . And if you don't know CSS, please check this tutorial .

#wonderfulsigns {
text-align: center;
}
#awesomeicons {
background: # background-color ;
color: # font-color ;
display: block online;
font-size: 16px;
width: 30px;
height: 30px;
row-height: 30px;
margin: 0 1px by 6px;
}
#exclamation a:pass{
background: # pass-color ;
}

#wonderfulsigns {
text-align: center;
}
#awesomeicons {
background: # background-color ;
color: # font-color ;
display: block online;
font-size: 16px;
width: 30px;
height: 30px;
row-height: 30px;
margin: 0 1px by 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#exclamation a:pass{
background: # pass-color ;
}

#wonderfulsigns {
text-align: center;
}
#awesomeicons {
border: 1px solid #border-color ;
color: # font-color ;
display: block online;
font-size: 16px;
width: 30 pixels;
height: 30px;
row-height: 30px;
margin: 0 1px by 6px;
}
#exclamation a:pass{
background: # pass-color ;
}

#wonderfulsigns {
text-align: center;
}
#awesomeicons {
border: 1px solid #border-color ;
color: # font-color ;
display: block online;
font-size: 16px;
width: 30 pixels;
height: 30px;
row-height: 30px;
margin: 0 1px by 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#exclamation one:pass{
background: # pass-color ;
}

#wonderfulsigns {
text-align: center;
}
#awesomeicons {
color: # font-color ;
display: block online;
font-size: 23 pixels;
margin: 0 6px by 6px;
}
#exclamation one:pass{
background: # pass-color ;
}

Now, what if we want to change the background or font color of a particular icon? First, we need to identify the part of the icon after this

#Amazing signs a. fa-facebook {
background: # background-color ;
color: # font-color ;
}

Here we can change the background and color of the Facebook icon, but you can do this for any icon. For example, let's add another rule to the Twitter icon:

#Amazing signs a. fa-facebook {
background: # background-color ;
color: # font-color ;
}
#Amazing signs a. fa twitter {
background: # background-color ;
color: # font-color ;
}

To enlarge the fonts, we can add CSS code like this:

#wonderfulsigns {
text-align: center;
}
icon #awesome a .fa{
display: block online;
font-size: 16px;
width: 30px;
height: 30px;
row-height: 30px;
}
#Amazing signs a. fa-facebook {
background: # background-color ;
color: # font-color ;
}
#Amazing signs a. fa twitter {
background: # background-color ;
color: # font-color ;
}

To apply, copy the code above and add CSS rules to the section of the icon you want to change.

Important: When adding a class to your icon, always precede it with a dot (.) as shown in the example above, otherwise it will not work.

And that's all! I hope this tutorial helped you to add awesome social icons in blogger. If you still have trouble adding it, see the sample page