How To Use FontAwesome Icons In Blogger Template

FontAwesome icons as name suggests, are awesome and piece of cake for all designers. You can use these icons on your blog, web apps, graphic designs and much more. These icons are extremely useful and that is why these icons are being used by many people day by day.

By now most of the popular bloggers are using these icons on their blogs and apps. These icons are getting more popular every next day. So what are these FontAwesome icons, how you can use and what will be the benefit of using these icons to you is what we are going to explain in this tutorial.

1. What are these FontAwesome Icons?

FontAwesome Icons are vector icons means these icons are scalable to any size and display perfect in high resolutions.

Recommended: Show Last updated date in blogger post

2. Can we customize these icons on our template?

These icons can be customized in size, shadow, color and everything which can be achieved via using CSS font style. All you have to do is add these styles to your blog template CSS stylesheet using class "i".

3. Is any JavaScript required to get these icons work on my blog?

That is the beauty of these icons that you need No JavaScript code to get these icons work on your blog. No more load time and works on all devices perfectly

Recommended: Add Google Analytics On Blogger

4. Are these icons free or premium?

These icons are totally free for use in any way (personal or commercial use). Good deal, no?

5. Why should I use these icons? Why not PNG or other images?

This is the excellent question and answer is Awesome. These icons load with 10x speed than your PNG or other image files and minimize the number of HTTP requests of loading images on your blog. These icons load as other text/fonts of your blog. Ultimately they boost the loading speed of your blog, gains more visitors, gives awesome look to your blog and help you in blog SEO in a way or other.

How To Use These Icons On My Blog?

To use these icons on your blogger blog, you need to edit template just a little. Go to Blogger → Template → Edit Template → Click Inside Code (backup your template code before editing by copying code to notepad). Now press Ctrl+f or Cmd+f then search for <head> tag and paste the given code below it.


<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
//]]>
</script>
<noscript>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
</noscript>

Above code is the CSS stylesheet of FontAawesome icons. Now you can place any icon to appear anywhere with simple  tag in your HTML e.g. inside <div>, <a>, <li> or . See the example below how we used icons in our navigation menu links.

<li>
<a href='https://www.twistblogg.com'>
<i class="fas fa-home"></i>Home </a>
</li>
<li>
<a href='https://www.twistblogg.com/p/contact-us.html'>
<i class="fas fa-envelope"></i>Contact Us </a>
</li>

To change/use another icon just replace the icon name in yellow color  and icon's name are given above every icon here at FontAwesome Icons Page. Just replace the icon name in yellow with your choice.

For example . See image of few icons with their name highlighted below. First fas remains same and second comes with icon name.

Customization of Icons With CSS

To customize the color, size, shadow and background, just call the  tag in CSS and paint these icons with your creativity. CSS code is given below to simply copy paste and customize. Copy the above code and paste it just before the ]]></b:skin> code line.


i {
	color: #E2FD18;
	font-size: 15px;
	padding-right: 5px;
	text-shadow: 1px 1px 1px #000;
}

This above CSS effect will apply to every icon on your blog. But what if you want to give different color, size, shadow etc. to a specific icon? Do not worry, you know what? These are awesome icons so here is the another hack for you. If you want to give separate effect to a icon than others' then you need to apply style inside the HTML  tag. Here is example:

<i class='fas fa-heart' style='font-size:18px; color:red;'/>

After applying the above style inside the HTML  tag, your icon size would be 18px and color red while other remains same as per the effect you applied by CSS to  tag. Anytime if anything goes wrong, let us help you. Thank You.

9 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

To insert an image, add [img]image_link[/img]
To insert a block of code, add [pre]parsed_code[/pre]
To insert a link, add [link=your_link]link_text[/link]
To insert a quote, add [quote]quote_text[/quote]
To insert a code, add [code]parsed_code[/code]

Unknown 8/29/2017 12:31:00 PM

Mine isn't working with easymag theme. Please I need your help
Vipin 5/11/2016 08:09:00 AM

Thanks Satbir for this awesome post. I have integrated these icons on my blog. I have a query, Can I contribute to your blog via a guest post?
1. Satbir 5/12/2016 07:39:00 AM
  
  VIPIN:: I Don't accept guest posts at the moment.
tolga 12/18/2015 04:14:00 PM

thanks
Unknown 12/07/2015 12:51:00 AM

I did it in my website. But actually I modified my code color to blue and its great. Hopefully apart from templates, all the customization done to my blog with the help of your tutorials.
Enrique 8/31/2015 05:53:00 PM

Where are the list of all the icons? Or I did not understand :( Could I use this for my blogger posts?
1. Satbir 9/01/2015 12:13:00 AM
  
  George Zuko :: Hello Buddy, all the icons list is available here = Icons List
  Yes you can use them on your blog posts too.
2. Anonymous 2/04/2017 11:29:00 AM
  
  Hi George..! You may also get a detailed article about font awesome icons Here

TwistBlogg