How to Add Font Awesome Social Icons in Blogger

Today, it's nearly impossible to find a blog or website that doesn't have at least one social media account in its name. Twitter or Facebook, Instagram or Pinterest or whatever, ever-expanding social media is helping to increase your online presence. .

Gone are the days when we could only rely on good search engine results. You may not be at the top of your keyword results on Google or any other search engine these days, but you can run a social media campaign that we hope will give you the results you want.

Basically, your website and your social media have to live together. You cannot live without the other if you want to talk to another. Social media is one of the best engines for internet traffic and if you want to increase your chances of being seen you need to create an account on one or more platforms Accounts matched to your branded account.

Announce your presence on social networks

Once you've set up your social media accounts, don't leave them there. You can of course use hat brands and connect with industry leaders, but that's not enough to raise awareness among your customers. You must use real estate on your website to indicate whether you live on Facebook, Twitter, Instagram, Wine, or Pinterest.

Do they ask you exactly how to do it? Well, through the social icons.

Social icons are small images that show a symbol connected to a specific social network. For example, Twitter social icons often have a blue bird. Otherwise t.

Having these images reminds your viewers that there are other ways to update everything they post. The use of social media is very high now, due to the speed of the media and entertainment. Also, your audience needs to know that you are on the social network.

If you are on the Blogger platform, you can add these social media images via the Font Awesome social icons .

What is an excellent letter?

Fonts Awesome "gives you customizable vector icons that can be customized instantly: size, color, print button and everything else that can be done with the power of CSS". It basically works as a toolkit where you can use more than 500 free icons to use on your site.

Now, if you've ever used social media icons, you know there are non-vector species. But Font Awesome offers measurable vector icons and is a great option for your website in the long run.

Why is this happening?

Well, the best reason is that the images can take a long time to load . Yes, these images are small, but the problem remains. Images also lose quality as the quality of the computer increases. In other words, make the most of the Font Awesome collection if you want your icons to load faster and look nice, clear and clean. Being able to customize your icons accordingly is also an interesting factor.

Why start using a good letter?

Why do so many vendors stick with the awesome font?

• Large collection of icons . Here you will find not only social media icons, but other traditional icons as well.
• CSS support . With CSS, you can customize icons to better suit your website. You can paint with colors, sizes, shades and other elements. This is something that non-vector images are very lacking because they are stuck with the icon of your choice.
• Speed . Vector images are lightweight and load quickly.
• Free . You don't have to pay for this wonderful letter.

So now that you know the importance of icons on your site, now is the time to learn how to add great spelling icons to Blogger .

Add the best social font icons to Blogger

Adding icons to your blog isn't rocket science. In fact, the process is much simpler.

Here's what you need to do:

Add a cool style sheet font to Blogger

Follow these steps to work with your Font Awesome gra blog

1. Go to the Blogger control screen, then go to the theme and click the Edit HTML button.
2. Click anywhere in the Code area and press CTRL + F to open the search box.
3. Click Select the search box and press Enter to find it.
   
   
   
4. Add the following line code by specifying the font-awesome.min.css style sheet location below Brand name
   

5. Click the "Save Theme" button to save your changes and start playing with excellent spelling.

Use cool font icons

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

Here is an example of HTML code you can add:

In the HTML code above you can see 8 different social icons which can be identified by looking at the link title attribute. The first example is for Facebook.

To use social icons, post your URL here for each social icon URL you want to include. Create a link in quotes and make sure you don't remove the quotes.

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

Now remember that the awesome font works everywhere with Marker, because it was created with internal components. Although you can use it , the official document prefers a short selection.

Font Awesome icons can be saved anywhere using the 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 link a YouTube icon to your official forum account. Find and click the YouTube icon in the list.

This will take you to the page where you will see this code on YouTube.

To include the icon in the list, copy each line starting with the code above and paste it where you want it to appear and change the code starting with the icon of your choice.

Finally, once the icon is added, the list looks like this.

Remember to change the title and insert your URL between the quotes.

When you are done editing the icons, go to "Page Design" and click the "Add Device" link to insert the code into the HTML / JavaScript tool. If you are using WordPress, paste it into a piece of text.

Customize the best CSS font icons

Suppose we want to make the icons bigger than they are now. This function is simple thanks to the use of CSS. Here is a sample code:

# Incredible icons {
Font size: 16 pixels;
Width: 30 pixels;
Height: 30 px;
Row height: 30 px;
}

Increase or decrease the value by 16 pixels to change the font size. The values ​​below (30 pixels) must always match the size and height of the item. Increasing these values ​​increases the available font size.

Here are some different styles for cool police social icons. Search CSS for # background color, # border color, # font color and # floating text to find out where to place the color codes. You can create a color code using this tool : Color Code Generator . And if you are new to CSS, check out this tutorial .

# Surprising signs {
Text alignment: center;
}
# Incredible icons {
Background: # background color ;
Color: # font color ;
Display: Internet blocking;
Font size: 16 pixels;
Width: 30 pixels;
Height: 30 px;
Row height: 30 px;
Variation: 0 1 pixel 6 pixel;
}
# Has surprising signs.
Background: # Increasing colors ;
}

# Surprising signs {
Text alignment: center;
}
# Incredible icons {
Background: # background color ;
Color: # font color ;
Display: Internet blocking;
Font size: 16 pixels;
Width: 30 pixels;
Height: 30 px;
Row height: 30 px;
Variation: 0 1 pixel 6 pixel;
-webkit-radius-edge: 100%;
-Moze-limit-radius: 100%;
Boundary radius: 100%;
}
# Has surprising signs.
Background: # Increasing colors ;
}

# Surprising signs {
Text alignment: center;
}
# Incredible icons {
Border: 1 solid pixel # border-color ;
Color: # font color ;
Display: Internet blocking;
Font size: 16 pixels;
Width: 30 pixels;
Height: 30 px;
Row height: 30 px;
Variation: 0 1 pixel 6 pixel;
}
# Has surprising signs.
Background: # Increasing colors ;
}

# Surprising signs {
Text alignment: center;
}
# Incredible icons {
Border: 1 solid pixel # border-color ;
Color: # font color ;
Display: Internet blocking;
Font size: 16 pixels;
Width: 30 pixels;
Height: 30 px;
Row height: 30 px;
Variation: 0 1 pixel 6 pixel;
-webkit-radius-edge: 100%;
-Moze-limit-radius: 100%;
Boundary radius: 100%;
}
# Has surprising signs.
Background: # Increasing colors ;
}

# Surprising signs {
Text alignment: center;
}
# Incredible icons {
Color: # font color ;
Display: Internet blocking;
Font size: 23 pixels;
Variation: 0 6 pixels 6 pixels;
}
# Has surprising signs.
Background: # Increasing colors ;
}

Now, what if we want to change the background or font color of a particular icon? Identify the part of the icons first, then immediately

# Surprising signs a. Facebook {
Background: # background color ;
Color: # font color ;
}

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

# Surprising signs a. Facebook {
Background: # background color ;
Color: # font color ;
}
# Surprising signs a. ት Twitter {
Background: # background color ;
Color: # font color ;
}

To expand the font, you can add a CSS code as follows:

# Surprising signs {
Text alignment: center;
}
# Surprising signs a .fa {
Display: Internet blocking;
Font size: 16 pixels;
Width: 30 pixels;
Height: 30 px;
Row height: 30 px;
}
# Surprising signs a. Facebook {
Background: # background color ;
Color: # font color ;
}
# Surprising signs a. ት Twitter {
Background: # background color ;
Color: # font color ;
}

Copy the code above to apply and add the CSS rule to the section of the icon you want to change.

Important: Always add a period (.) In front of you when adding a section to your icon, as shown in the example above, otherwise it won't work.

And this is all! I hope this guide helped you add some great social icons to your blog. If you still can't add them, check out the examples page.