How to Resize Font Awesome Icons? - Supported By Bloggerspice

This blog post is supported by Bloggerspice.com visit the bloggerspice to get complete quality post like this, while this blog maybe not contain all post for bloggerspice, you can always visit the bloggerspice for more content, enjoy reading and don't forget to leave a comment and share.

While we use Font Awesome Icons in our website or Blog then often we face a problem about adjusting the icon size. This is quite easy but need to add a simple piece of code. So in this tutorial I will show you the way to resize the Font Awesome Icons.

By Default Font Awesome Icon size is small. And default code is below-

<i class="fa fa-diamond"></i>

This code represent the Diamond icon. But if you wish to increase the icon size little bit then you have to add a simple code just like below

<i class="fa fa-diamond fa-lg"></i>

here I just added fa-lg. Here lg means large. It will increase the icon to 33%. Again of you want to increase bit more the just add another simple code like below-

<i class="fa fa-diamond fa-2x"></i>

Here I have added fa-2x and this code will increase extra 33% than fa-lg size. So the icon will be big. That means your Icon is now 66% bigger than original icon. So similarly you can increase your Font Awesome Icon by adding 3x, 4x and 5x but not more than that.

<i class="fa fa-diamond fa-3x"></i>

<i class="fa fa-diamond fa-4x"></i>

<i class="fa fa-diamond fa-5x"></i>

So this is really easy.

Now I will show you about resizing by using CSS code.

By using CSS coding we can easily give any size on Font Awesome icons. But in this case we have to use icon's code digit only. Please look carefully in below example-

<style>.resize:after {content:"\f219";top:0;font-family:FontAwesome; font-size:22px;left:8px;color:#222222;}</style>

In the above code line I have wrap with <style> and </style> for CSS support. And After that the main code I have wrap with div class, just like below.

<div class='resize'>Resize Icon</div>

In example I have written the code .resize:after that means after appearing the text the icon will appear. If you wish to appearance of icon before text then you have to write the code like .resize:before and this is really simple.   

And to resize the font size just change the font-size:22px; with lesser or greater font size. example font-size:25px;

I hope this article will help you to resize Font Awesome icon easily in your Blog. for any further help feel free to write me.

from Blogger Spice | Authoritative Blogger Lead http://ift.tt/1HG9JhH