331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.

How To Use FontAwesome Icons In Blogger Template

Font awesome allows you to easily integrate icons in blog. Learn how to start using font awesome icons in blogger template.
How To Use FontAwesome Icons In Blogger Template
add font awesome icons in blog
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 <i> tag in your HTML e.g. inside <div>, <a>, <li> or <p>. 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 <i class='fas fa-home'> 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 <i class='fas fa-laptop'>. See image of few icons with their name highlighted below. First fas remains same and second comes with icon name.

add font awesome icons

Recommended: Prevent Auto Pagination in blogger

Customization of Icons With CSS

To customize the color, size, shadow and background, just call the <i> 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 <i> tag. Here is example:
<i class='fas fa-heart' style='font-size:18px; color:red;'/>
 After applying the above style inside the HTML <i> tag, your icon size would be 18px and color red while other remains same as per the effect you applied by CSS to <i> tag. Anytime if anything goes wrong, let us  help you. Thank You.

Share this post

Explore more articles by Satbir

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]
  1. Mine isn't working with easymag theme. Please I need your help
  2. 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. VIPIN:: I Don't accept guest posts at the moment.
  3. thanks
  4. 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.
  5. Where are the list of all the icons? Or I did not understand :( Could I use this for my blogger posts?
    1. George Zuko :: Hello Buddy, all the icons list is available here = Icons List
      Yes you can use them on your blog posts too.
    2. Hi George..! You may also get a detailed article about font awesome icons Here
Post a Comment