CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-fortawesome--fontawesome-free

The iconic font, CSS, and SVG framework providing scalable vector icons, web fonts, and CSS styling for web and desktop applications

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

css-framework.mddocs/

CSS Framework

The Font Awesome CSS framework provides traditional web font-based icon usage through CSS classes. This approach uses web font files and CSS classes to display icons, offering broad browser compatibility and familiar implementation patterns.

CSS Files

Complete Bundle

/* css/all.css - Complete Font Awesome CSS (108KB) */
@import '~@fortawesome/fontawesome-free/css/all.css';

Contains all Font Awesome styles and icon definitions in a single file.

Modular Approach

/* Core framework */
@import '~@fortawesome/fontawesome-free/css/fontawesome.css';

/* Icon styles */
@import '~@fortawesome/fontawesome-free/css/solid.css';
@import '~@fortawesome/fontawesome-free/css/regular.css';
@import '~@fortawesome/fontawesome-free/css/brands.css';

File breakdown:

  • fontawesome.css: Core framework (85KB)
  • solid.css: Solid icon definitions (806B)
  • regular.css: Regular icon definitions (812B)
  • brands.css: Brand icon definitions (20KB)

SVG-Specific CSS

/* For SVG with JavaScript usage */
@import '~@fortawesome/fontawesome-free/css/svg-with-js.css';

/* Base SVG styling */
@import '~@fortawesome/fontawesome-free/css/svg.css';

Core Icon Classes

Base Icon Classes

.fas { /* Solid icons */ }
.far { /* Regular icons */ }
.fab { /* Brand icons */ }

Usage:

<i class="fas fa-user"></i>     <!-- Solid user icon -->
<i class="far fa-heart"></i>    <!-- Regular heart icon -->
<i class="fab fa-github"></i>   <!-- GitHub brand icon -->

Individual Icon Classes

.fa-{icon-name} { /* Specific icon styles */ }

Font Awesome provides over 2,800 individual icon classes:

Popular solid icons:

<i class="fas fa-home"></i>
<i class="fas fa-user"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-search"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-phone"></i>
<i class="fas fa-calendar"></i>
<i class="fas fa-download"></i>

Popular regular icons:

<i class="far fa-user"></i>
<i class="far fa-heart"></i>
<i class="far fa-file"></i>
<i class="far fa-folder"></i>
<i class="far fa-clock"></i>

Popular brand icons:

<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-google"></i>
<i class="fab fa-youtube"></i>

Sizing Classes

.fa-xs    { font-size: 0.75em; }  /* 12px at 16px base */
.fa-sm    { font-size: 0.875em; } /* 14px at 16px base */
.fa-lg    { font-size: 1.25em; }  /* 20px at 16px base */
.fa-xl    { font-size: 1.5em; }   /* 24px at 16px base */
.fa-2xl   { font-size: 2em; }     /* 32px at 16px base */

/* Relative sizing */
.fa-1x    { font-size: 1em; }
.fa-2x    { font-size: 2em; }
.fa-3x    { font-size: 3em; }
.fa-4x    { font-size: 4em; }
.fa-5x    { font-size: 5em; }
.fa-6x    { font-size: 6em; }
.fa-7x    { font-size: 7em; }
.fa-8x    { font-size: 8em; }
.fa-9x    { font-size: 9em; }
.fa-10x   { font-size: 10em; }

Usage:

<i class="fas fa-user fa-xs"></i>   <!-- Extra small -->
<i class="fas fa-user fa-sm"></i>   <!-- Small -->
<i class="fas fa-user"></i>         <!-- Default -->
<i class="fas fa-user fa-lg"></i>   <!-- Large -->
<i class="fas fa-user fa-xl"></i>   <!-- Extra large -->
<i class="fas fa-user fa-2xl"></i>  <!-- 2x extra large -->
<i class="fas fa-user fa-3x"></i>   <!-- 3x relative -->

Rotation and Flipping

Rotation Classes

.fa-rotate-90   { transform: rotate(90deg); }
.fa-rotate-180  { transform: rotate(180deg); }
.fa-rotate-270  { transform: rotate(270deg); }

Flipping Classes

.fa-flip-horizontal { transform: scaleX(-1); }
.fa-flip-vertical   { transform: scaleY(-1); }
.fa-flip-both       { transform: scale(-1); }

Usage:

<i class="fas fa-shield fa-rotate-90"></i>
<i class="fas fa-shield fa-rotate-180"></i>
<i class="fas fa-shield fa-flip-horizontal"></i>
<i class="fas fa-shield fa-flip-vertical"></i>

Animation Classes

Spinning Animation

.fa-spin {
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Pulse Animation

.fa-pulse {
  animation: fa-pulse 1s infinite;
}

@keyframes fa-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.25; }
  100% { opacity: 1; }
}

Usage:

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-heart fa-pulse"></i>

Border and Pull Classes

Bordered Icons

.fa-border {
  border: solid 0.08em #eee;
  border-radius: 0.1em;
  padding: 0.2em 0.25em 0.15em;
}

Pull Left/Right

.fa-pull-left {
  float: left;
  margin-right: 0.3em;
}

.fa-pull-right {
  float: right;
  margin-left: 0.3em;
}

Usage:

<i class="fas fa-quote fa-pull-left fa-border"></i>
<p>Lorem ipsum dolor sit amet...</p>

<i class="fas fa-quote fa-pull-right"></i>
<p>Lorem ipsum dolor sit amet...</p>

List Icons

.fa-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0;
}

.fa-li {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit;
}

Usage:

<ul class="fa-ul">
  <li><i class="fa-li fas fa-check"></i>Item 1</li>
  <li><i class="fa-li fas fa-check"></i>Item 2</li>
  <li><i class="fa-li fas fa-times"></i>Item 3</li>
</ul>

Stacked Icons

.fa-stack {
  display: inline-block;
  height: 2em;
  line-height: 2em;
  position: relative;
  vertical-align: middle;
  width: 2.5em;
}

.fa-stack-1x { 
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1;
}

.fa-stack-2x {
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 0;
}

Usage:

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

Fixed Width Icons

.fa-fw {
  text-align: center;
  width: 1.25em;
}

Usage:

<div>
  <i class="fas fa-home fa-fw"></i> Home
</div>
<div>
  <i class="fas fa-file fa-fw"></i> Library
</div>
<div>
  <i class="fas fa-bell fa-fw"></i> Notifications
</div>

Inverse Colors

.fa-inverse {
  color: #fff;
}

Usage:

<span class="fa-stack">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>

Screen Reader Support

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

Usage:

<i class="fas fa-user" aria-hidden="true"></i>
<span class="sr-only">User profile</span>

<!-- Or with title -->
<i class="fas fa-heart" title="Favorite this item"></i>

Web Font Files

The CSS framework requires web font files from the webfonts/ directory:

@font-face {
  font-family: 'Font Awesome 7 Free';
  src: url('../webfonts/fa-solid-900.woff2') format('woff2'),
       url('../webfonts/fa-solid-900.woff') format('woff'),
       url('../webfonts/fa-solid-900.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

Available font files:

  • fa-solid-900.woff2 / .woff / .ttf - Solid icons
  • fa-regular-400.woff2 / .woff / .ttf - Regular icons
  • fa-brands-400.woff2 / .woff / .ttf - Brand icons

Compatibility CSS

Font Awesome v4 Compatibility

/* css/v4-shims.css - Provides v4 class name compatibility */
@import '~@fortawesome/fontawesome-free/css/v4-shims.css';

Maps old v4 class names to new v5+ equivalents automatically.

Font Face Compatibility

/* css/v4-font-face.css - v4 font face definitions */
/* css/v5-font-face.css - v5 font face definitions */

Usage with different versions:

<!-- Current usage -->
<i class="fas fa-user"></i>

<!-- v4 compatibility (with shims) -->
<i class="fa fa-user"></i>

docs

css-framework.md

icon-assets.md

index.md

javascript-api.md

scss-customization.md

tile.json