What is Font Awesome?
Font Awesome is an awesome font text that is working specific on icons. The Font Awesome Icons are text that friendly working with our context. It is a kind of vector icons that allow you to customize such as font-size, shadow, color and other that work with of CSS. Font Awesome is 100% free of charge within the more than 500 icons for use on the blog or website.You have used the icons by generated images from your hosting that longer to load from the hosting, even it is small but it a kind of images that is a point that Font Awesome is better and Font Awesome is offered you the scalable vector icons and it is a better option to use on your blog or site.
Why Using Font Awesome?
- The CSS is supported: So you can adjust the icons and whatever you want it to be such as font-size, color, icons shadow and others.
- Free of Charge: You will get 100% free of change from your using Font Awesome.
- Supported Speed: The Font Awesome are fast loading speed, better than the image icons.
- Multi Collection of Icons: Not just the social icons that supported by Font Awesome, otherwise you have many option tops choose other popular icons, brand mane, popular logo etc…
So, does Font Awesome support to blogger and Wordpress site? Yes, of course, you will be able to add Font Awesome to your blog at anytime you want. The below tip will help you to do it.
How to Add Font Awesome in Blogger?
To get a free Awesome Icons, just flow this blow instruction;1. Login your blog
2. Go the “Template” >> Edit HTML
3. Search for <head> then copy below code and paste below it and press “Save Template”
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">Note: If you can not save the Template or showing the red note on top just bring that code to convert the copy the converted code and paste below <head> instead.
4. Go to Font Awesome Webpage
You will see many icons when you scroll it down. If you need any icon just click on it then it will load to another page then you will get the code then just copy it. Place anywhere you want to use on your blog.
Add Font Awesome by Social Icons
Now after you completed the steps about, it is a time you can us the Font Awesome for your blog. And these below social icons could be instead of your previous images icons. Now copy this below HMLM code and place anywhere you want.<div id="socialfontawesome">
<a href="URL" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="URL" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a>
<a href="URL" rel="nofollow" target="_blank" title="Google Plus"><i class="fa fa-google-plus"></i></a>
<a href="URL" rel="nofollow" target="_blank" title="Pinterest"><i class="fa fa-pinterest"></i></a>
<a href="URL" rel="nofollow" target="_blank" title="Youtube"><i class="fa fa-youtube"></i></a>
<a href="URL" rel="nofollow" target="_blank" title="Instagram"><i class="fa fa-instagram"></i></a>
<a href="URL" rel="nofollow" target="_blank" title="Tumblr"><i class="fa fa-tumblr"></i></a>
<a href="URL" rel="nofollow" target="_blank" title="RSS"><i class="fa fa-rss"></i></a>
</div>
Note:
- - You need to replace your social URL instead of URL which highlighted in the blue line.
- - Font Awesome is working <i> tag the keeping working inline element, you also can use with <span> but the Font Awesome prefer <i> which the official designed.
- - And if you would like to delete any icon just remove it from the [ <a href="........ end by </a> ]
/*---[Social Font Awesome]----------------*/
#socialfontawesome {text-align: center;}
#socialfontawesome a {
background: #1c8b78;
color: #fff;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
padding:5px;
margin: 0 1px 6px;
border: 1px solid #1c8b78;}
#socialfontawesome a:hover {background: #444;}
/*---[Social Font Awesome]----------------*/
#socialfontawesome {text-align: center;}
#socialfontawesome a {
background: #1c8b78;
color: #fff;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
padding:5px;
margin: 0 1px 6px;
border: 1px solid #1c8b78;
border-radius: 5px;}
#socialfontawesome a:hover {background: #444;}
/*---[Social Font Awesome]----------------*/
#socialfontawesome {text-align: center;}
#socialfontawesome a {
background: #fff;
color: #444;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
padding:5px;
margin: 0 1px 6px;
border: 1px solid #444;
border-radius: 0px;}
#socialfontawesome a:hover {background: #f2f2f2;}
/*---[Social Font Awesome]----------------*/
#socialfontawesome {text-align: center;}
#socialfontawesome a {
background: #0396cc;
color: #fff;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
padding:5px;
margin: 0 1px 6px;
border: 1px solid #0396cc;
border-radius: 100px;}
#socialfontawesome a:hover {background: #50c8f5;}
/*---[Social Font Awesome ]----------------*/The last step after you and any CSS Code to your blog, please press on "Save Temple" to check the result you have done.
#socialfontawesome {text-align: center;}
#socialfontawesome a {
color: #0366c3;
display: inline-block;
font-size: 20px;
width: 30px;
height: 30px;
line-height: 30px;
padding:5px;
margin: 0 1px 6px;}
#socialfontawesome a:hover {background: #50c8f5;border-radius: 100px;}
