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

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

回答1:

Really easy using scale

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

回答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

来源：https://stackoverflow.com/questions/28564793/changing-width-of-font-awesome-icons