or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-framework.mdicon-assets.mdindex.mdjavascript-api.mdscss-customization.md
tile.json

index.mddocs/

Font Awesome Free

Font Awesome Free is a comprehensive icon library and framework that provides scalable vector icons, web fonts, and CSS styling for web and desktop applications. The package includes thousands of professionally designed icons across multiple categories (solid, regular, brands) delivered as SVG files, web fonts, and CSS classes for easy integration.

Package Information

  • Package Name: @fortawesome/fontawesome-free
  • Package Type: npm
  • Language: JavaScript/CSS
  • Installation: npm install @fortawesome/fontawesome-free

Core Imports

JavaScript/SVG Usage

// Import FontAwesome core with all icons
import '@fortawesome/fontawesome-free/js/all.js';

// Or import core + specific styles
import '@fortawesome/fontawesome-free/js/fontawesome.js';
import '@fortawesome/fontawesome-free/js/solid.js';
import '@fortawesome/fontawesome-free/js/regular.js';
import '@fortawesome/fontawesome-free/js/brands.js';

CSS/Web Font Usage

/* Import complete CSS bundle */
@import '~@fortawesome/fontawesome-free/css/all.css';

/* Or import core + specific styles */
@import '~@fortawesome/fontawesome-free/css/fontawesome.css';
@import '~@fortawesome/fontawesome-free/css/solid.css';
@import '~@fortawesome/fontawesome-free/css/regular.css';
@import '~@fortawesome/fontawesome-free/css/brands.css';

SCSS Usage

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';

Basic Usage

HTML with CSS Classes

<!-- Solid icons (default) -->
<i class="fas fa-user"></i>
<i class="fas fa-home"></i>

<!-- Regular icons -->
<i class="far fa-user"></i>
<i class="far fa-heart"></i>

<!-- Brand icons -->
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>

JavaScript/SVG API

// Automatic icon replacement (default behavior)
// Icons in HTML are automatically converted to SVG

// Manual icon creation
const userIcon = FontAwesome.icon({ prefix: 'fas', iconName: 'user' });
document.body.appendChild(userIcon.node[0]);

// Configuration
FontAwesome.config.autoReplaceSvg = false; // Disable auto-replacement
FontAwesome.dom.i2svg(); // Manually convert icons

Architecture

Font Awesome provides multiple integration approaches:

  • CSS/Web Fonts: Traditional approach using CSS classes and web font files
  • JavaScript/SVG: Modern approach using JavaScript to insert inline SVG icons
  • Individual SVGs: Direct access to SVG files for custom implementations
  • SCSS Integration: Preprocessing capabilities with customizable variables

Capabilities

JavaScript API

Core JavaScript functionality for programmatic icon management and DOM manipulation. Provides automatic icon replacement, manual icon creation, and extensive configuration options.

interface FontAwesome {
  config: FontAwesomeConfig;
  dom: FontAwesomeDom;
  parse: FontAwesomeParse;
  library: FontAwesomeLibrary;
  noAuto(): void;
  findIconDefinition(iconLookup: IconLookup): IconDefinition | null;
  toHtml(abstractElement: AbstractElement): string;
  icon(iconDefinition: IconDefinition, params?: IconParams): Icon;
  layer(assembler: () => AbstractElement[], params?: LayerParams): Icon;
  text(content: string, params?: TextParams): Icon;
  counter(content: string | number, params?: CounterParams): Icon;
}

JavaScript API

CSS Framework

CSS classes and web font integration for traditional icon usage. Includes utility classes for sizing, rotation, animation, and positioning.

/* Core icon classes */
.fas, .far, .fab { /* base icon styles */ }
.fa-{icon-name} { /* specific icon styles */ }

/* Utility classes */
.fa-xs, .fa-sm, .fa-lg, .fa-xl, .fa-2xl { /* sizing */ }
.fa-rotate-90, .fa-rotate-180, .fa-rotate-270 { /* rotation */ }
.fa-flip-horizontal, .fa-flip-vertical { /* flipping */ }
.fa-spin, .fa-pulse { /* animation */ }

CSS Framework

SCSS Customization

SCSS source files with variables and mixins for customization and preprocessing integration.

// Core variables
$fa-font-path: '../webfonts' !default;
$fa-css-prefix: 'fa' !default;
$fa-font-display: block !default;

// Icon mixins
@mixin fa-icon($icon, $style: solid);
@mixin fa-size($size);

SCSS Customization

Icon Assets

Direct access to individual SVG files and web font files for custom implementations and optimization.

interface IconAssets {
  svgs: {
    solid: string[]; // 1,984 solid SVG files
    regular: string[]; // 273 regular SVG files  
    brands: string[]; // 549 brand SVG files
  };
  webfonts: string[]; // .woff2, .woff, .ttf, .eot files
  sprites: string[]; // SVG sprite files
}

Icon Assets

Types

interface FontAwesomeConfig {
  styleDefault: string;
  familyDefault: string;
  cssPrefix: string;
  replacementClass: string;
  autoReplaceSvg: boolean;
  autoAddCss: boolean;
  searchPseudoElements: boolean;
  searchPseudoElementsWarnings: boolean;
  searchPseudoElementsFullScan: boolean;
  observeMutations: boolean;
  mutateApproach: string;
  keepOriginalSource: boolean;
  measurePerformance: boolean;
  showMissingIcons: boolean;
}

interface IconLookup {
  prefix: 'fas' | 'far' | 'fab';
  iconName: string;
}

interface IconDefinition {
  prefix: string;
  iconName: string;
  icon: [number, number, string[], string, string | string[]];
}

interface Icon {
  tag: string;
  attributes: Record<string, string>;
  children: Icon[];
  node: Element[];
  html: string[];
}