Changing Width of Font Awesome Icons

Question

I'm trying to adjust the scaling and width of an icon. I'm specifically trying to make the icon

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

wider, but not taller.

I'm not trying to make it fa-2x or fa-3x. I'm trying to scale it so that the width is, say 150%, while the height is still 100%.

Answer 1

Really easy using scale

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

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

<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

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

<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