How to Install Font Awesome On Blogger to Display Icons on Blog

Hello and welcome to GetWebInfo.Com. Here on this post you can be able to learn about how can you install Font Awesome on Blogger to Display Icons on your Blog. Font Awesome offer a wide range (600+) of high quality scalable vector icons, that can be easily be used on your blog and costumed using CSS. This post will show you to add the icon font to your blogger blog and use icons with in your content.

How to Install Font Awesome On Blogger to Display Icons on Blog


Install Font Awesome to Your Blogger

Adding Font Awesome to Blogger is pretty easy. Head over to the Font Awesome Get Started Page and enter your email address. They will email you with a unique embed code that looks similar to the following.

<script src="https://use.fontawesome.com/000aaaa000.js"></script>
Now you need to copy and paste that in to your theme's head section. On Blogger go to Theme>Edit HTML and find the closing head tag </head>. Right above </head> paste the embed code from Font Awesome.



Add Font Awesome Icons to your Blogger Blog

Now that Font Awesome is installed, we can use some of icons on our blogs to display in blog posts, sidebar, navigation menu, buttons and so on. To do so we use a simple line of code in our HTML.

Visit the Font Awesome Icon Page and click on the icon you want to use. On the dedicated icon page, you'll see code that looks like this:
<i class="fa fa-icon-name" aria-hidden="true"></i>
Paste this where you want to display the icon. This could be in a post, post,page,sidebar gadget, navigation, footer or anywhere else that accepts HTML. In order to make the icon a click-able link, we can wrap it in link tags like so.

<a href="URL" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i></a>
Customizing Font Awesome Icons Using CSS

You can customize the CSS and change the icon color, Size, shadows and so on. To do this, use the icons class name (like fa-twitter) or suing the general class fa to target all icons.

.fa { /* CSS Styling Goes Here */ } .fa-twitter { /* CSS Styling Goes Here */ }
There's lots of other ways to customize the icons too, check out the Example Page Here

I Hope this article is really helpful for you. If you like this article so please share it to your Social Media accounts thanks.

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.