39

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

RedDwarfian
  • 698
  • 1
  • 5
  • 11

3 Answers3

72

Really easy using scale

.fa { transform: scale(1.5,1); }
Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
  • 1
    Yeah, I was hoping that I wouldn't have to use transforms, but since it's a font, I guess I have to. Thank you. – RedDwarfian Feb 17 '15 at 18:49
  • 1
    great, thanks. should use cross browser prefix too? `-webkit-transform: scale(1.5,1); -moz-transform: scale(1.5,1); -ms-transform: scale(1.5,1); -o-transform: scale(1.5,1); transform: scale(1.5,1);` – Lafif Astahdziq Jan 04 '17 at 06:02
  • That worked like a charm. Although i used it to increase height of the font awesome icon but still it gave me an idea. – Sorangwala Abbasali Jan 13 '17 at 13:21
  • This will distorted the icons. using font-size to upper div/elements work fine for me. – Amit kumar Jun 25 '19 at 11:53
  • @Amitkumar - yes, of course it will. However, the OP asked `I'm specifically trying to make the icon wider, but not taller.` which is why this is the correct answer to the asked question. – Adam Jenkins Jun 25 '19 at 12:03
5

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

ohkts11
  • 2,581
  • 2
  • 21
  • 17
4

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

GabbarPatil
  • 41
  • 1