Changing Width Of Font Awesome Icons

I'm trying to adjust the scaling and width of an icon. I'm specifically trying to make the icon wider, but not taller. I'm not tryin

Solution 1:

Really easy using scale

.fa { transform: scale(1.5,1); }

Solution 2:

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.

<divstyle="font-size: 2rem;"><div><iclass="fas fa-skating fa-fw"style="background:DodgerBlue"></i> Skating</div><div><iclass="fas fa-skiing fa-fw"style="background:SkyBlue"></i> Skiing</div><div><iclass="fas fa-skiing-nordic fa-fw"style="background:DodgerBlue"></i> Nordic Skiing</div><div><iclass="fas fa-snowboarding fa-fw"style="background:SkyBlue"></i> Snowboarding</div><div><iclass="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

Solution 3:

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..

<iclass="fas fa-home fa-xs"><iclass="fas fa-home fa-sm"><iclass="fas fa-home fa-lg"><iclass="fas fa-home fa-2x"><iclass="fas fa-home fa-3x"><iclass="fas fa-home fa-4x"><iclass="fas fa-home fa-5x"><iclass="fas fa-home fa-6x">

now enjoy with your icon ..goodluck