How to Resize Font Awesome Icons?
How to Resize Font Awesome Icons?
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.
3 comments