How to Resize Font Awesome Icons?

How to Resize Font Awesome Icons?

adjust icon size

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>

large icon

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>

2x icon size

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>

adjust icon size

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>
increase size

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.

Post a Comment

Thank you so much rabbi vai !!! your help is really appreciated :idea

Thanks Pulak :hello

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *