Icons

Angular Bootstrap 5 Icons

Basic usage

You can place icons just about anywhere using the CSS Prefix fa and the icon's name. Icons are designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct). 

        
            
        <i class="fas fa-camera-retro"></i>

To increase icon sizes relative to their container, use fa-xs, fa-sm, fa-lg (33% increase), or use literal sizes (to scale it from 1x to 10x) fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x. 

        
            
        <i class="fas fa-camera fa-xs"></i>
        <i class="fas fa-camera fa-sm"></i>
        <i class="fas fa-camera fa-lg"></i>
        <i class="fas fa-camera fa-2x"></i>
        <i class="fas fa-camera fa-3x"></i>
        <i class="fas fa-camera fa-4x"></i>
        <i class="fas fa-camera fa-5x"></i>
        <i class="fas fa-camera fa-6x"></i>
        <i class="fas fa-camera fa-7x"></i>
        <i class="fas fa-camera fa-8x"></i>
        <i class="fas fa-camera fa-9x"></i>
        <i class="fas fa-camera fa-10x"></i>

You can make all your icons the same width so they can easily vertically align, like in a list or navigation menu.

Add a class of fa-fw on the HTML element referencing your icon to set one or more icons to the same fixed width. This is great to use when varying icon widths (e.g. a tall but skinny icon atop a wide but short icon) would throw off vertical alignment. For clarity in the following example, we’ve added a background color on the icon so you can see the fixed width and also bumped up the font-size of the parent element.

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow
        
            
      <!-- vertically aligning icons -->
      <div style="font-size: 2rem;">
        <div><i class="fa-solid fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
        <div><i class="fa-solid fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
        <div><i class="fa-solid fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
        <div><i class="fa-solid fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
        <div><i class="fa-solid fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
      </div>