I\'m trying to adjust the scaling and width of an icon. I\'m specifically trying to make the icon
wi
Really easy using scale
.fa { transform: scale(1.5,1); }
This answer only works when you are trying to adjust the icons in the list. But I am posting this because I guess some people visiting this page is in this situation.
If you are so applying "fa-fw" class to icons solves the problems.
Example from docs.
<div style="font-size: 2rem;">
<div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
<div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
<div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
<div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
<div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>
Docs https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
At first I was also worried that how to change the size of icons of font awesome, I tried lots of method even I tried to add some classes that individually increase or decrease the size of icon.. but nothing worked as it supposed to .. but then I found some classes which was already defined by font awesome to play with size of icons .and here are the list of some classes..
<i class="fas fa-home fa-xs">
<i class="fas fa-home fa-sm">
<i class="fas fa-home fa-lg">
<i class="fas fa-home fa-2x">
<i class="fas fa-home fa-3x">
<i class="fas fa-home fa-4x">
<i class="fas fa-home fa-5x">
<i class="fas fa-home fa-6x">
now enjoy with your icon ..goodluck