fa-Nx

StevenSwiniarski's avatar
StevenSwiniarski's avatar
StevenSwiniarski
Published Aug 1, 2022Updated Oct 14, 2022

The fa-Nx classes adjust the icon size relative to its container, where N can be a number from 2 to 10 (fa-2x ... fa-10x). Additionally, there are classes for general sizes like fa-xs, fa-sm, and fa-lg.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours

Example

<i class="fas fa-file-code fa-xs"></i>
<i class="fas fa-file-code fa-sm"></i>
<i class="fas fa-file-code fa-lg"></i>
<i class="fas fa-file-code fa-2x"></i>
<i class="fas fa-file-code fa-4x"></i>
<i class="fas fa-file-code fa-6x"></i>
<i class="fas fa-file-code fa-8x"></i>
<i class="fas fa-file-code fa-10x"></i>

Font Awesome Sizing Examples

All contributors

Learn Open Source on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Beginner Friendly.
      6 hours