Changing Width of Font Awesome Icons

前端 未结 3 679
半阙折子戏
半阙折子戏 2021-02-02 08:46

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

wi

相关标签:
3条回答
  • 2021-02-02 08:51

    Really easy using scale

    .fa { transform: scale(1.5,1); }
    
    0 讨论(0)
  • 2021-02-02 08:56

    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

    0 讨论(0)
  • 2021-02-02 08:57

    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

    0 讨论(0)
提交回复
热议问题