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

scss-customization.mddocs/

SCSS Customization

Font Awesome provides comprehensive SCSS source files for customization, theming, and build-time optimization. The SCSS files offer variables, mixins, and modular imports for fine-grained control over Font Awesome's appearance and functionality.

SCSS Files Structure

Main Entry Points

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

Individual Entry Files

  • scss/fontawesome.scss: Core Font Awesome framework
  • scss/solid.scss: Solid icon style definitions
  • scss/regular.scss: Regular icon style definitions
  • scss/brands.scss: Brand icon style definitions

Partial Files

  • scss/_variables.scss: SCSS variables and icon definitions (152KB)
  • scss/_mixins.scss: SCSS mixins and utility functions
  • scss/_functions.scss: SCSS utility functions
  • scss/_core.scss: Core Font Awesome styling
  • scss/_icons.scss: Icon-specific SCSS rules

Core Variables

Font Configuration

// Font paths and display
$fa-font-path: '../webfonts' !default;
$fa-font-display: block !default;

// CSS class configuration
$fa-css-prefix: 'fa' !default;
$fa-version: '7.0.1' !default;
$fa-border-color: #eee !default;
$fa-inverse: #fff !default;
$fa-li-width: 2em !default;

Customization example:

// Custom font path
$fa-font-path: '/assets/fonts';

// Custom CSS prefix
$fa-css-prefix: 'icon';

// Custom border color
$fa-border-color: #ccc;

@import '~@fortawesome/fontawesome-free/scss/fontawesome';

Animation Variables

// Animation durations
$fa-animation-duration: 1s !default;
$fa-spin-animation-duration: 2s !default;

// Animation timing functions
$fa-animation-timing: linear !default;

Size Variables

// Base sizing
$fa-size-scale-base: 1em !default;

// Named sizes
$fa-2xs: 0.625em !default;
$fa-xs: 0.75em !default;
$fa-sm: 0.875em !default;
$fa-lg: 1.25em !default;
$fa-xl: 1.5em !default;
$fa-2xl: 2em !default;

Core Mixins

Icon Mixin

@mixin fa-icon($icon: null, $style: solid) {
  // Apply Font Awesome icon styles
}

Usage:

.custom-icon {
  @include fa-icon('user', solid);
}

Size Mixin

@mixin fa-size($size) {
  font-size: $size;
}

Usage:

.large-icon {
  @include fa-size(2em);
}

Icon Content Mixin

@mixin fa-content($icon-unicode) {
  content: $icon-unicode;
}

Usage:

.my-icon::before {
  @include fa-content('\f007'); // user icon unicode
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
}

Icon Variables

Font Awesome provides SCSS variables for all icon Unicode values:

// Solid icons
$fa-var-user: \f007;
$fa-var-home: \f015;
$fa-var-heart: \f004;
$fa-var-search: \f002;
$fa-var-envelope: \f0e0;
$fa-var-phone: \f095;
$fa-var-calendar: \f133;
$fa-var-download: \f019;

// Regular icons (far-)
$fa-var-user: \f007;    // Regular user
$fa-var-heart: \f004;   // Regular heart
$fa-var-file: \f15b;    // Regular file
$fa-var-folder: \f07b;  // Regular folder

// Brand icons (fab-)
$fa-var-github: \f09b;
$fa-var-twitter: \f099;
$fa-var-facebook: \f09a;
$fa-var-linkedin: \f08c;

Usage:

.github-icon::before {
  content: $fa-var-github;
  font-family: 'Font Awesome 7 Brands';
  font-weight: 400;
}

Utility Mixins

Animation Mixins

@mixin fa-spin($duration: $fa-spin-animation-duration) {
  animation: fa-spin $duration infinite linear;
}

@mixin fa-pulse($duration: $fa-animation-duration) {
  animation: fa-pulse $duration infinite;
}

Usage:

.spinning-loader {
  @include fa-spin(1s);
}

.pulsing-heart {
  @include fa-pulse(0.5s);
}

Transform Mixins

@mixin fa-rotate($degrees) {
  transform: rotate(#{$degrees}deg);
}

@mixin fa-flip($axis: horizontal) {
  @if $axis == horizontal {
    transform: scaleX(-1);
  } @else if $axis == vertical {
    transform: scaleY(-1);
  } @else if $axis == both {
    transform: scale(-1);
  }
}

Usage:

.rotated-icon {
  @include fa-rotate(45);
}

.flipped-icon {
  @include fa-flip(horizontal);
}

Theme Customization

Color Theming

// Override default colors
$fa-primary-color: #007bff !default;
$fa-secondary-color: #6c757d !default;
$fa-success-color: #28a745 !default;
$fa-danger-color: #dc3545 !default;
$fa-warning-color: #ffc107 !default;
$fa-info-color: #17a2b8 !default;

Custom theme example:

// Dark theme variables
$fa-primary-color: #0d6efd;
$fa-border-color: #333;
$fa-inverse: #000;

// Custom icon colors
.fa-primary { color: $fa-primary-color; }
.fa-success { color: $fa-success-color; }
.fa-danger { color: $fa-danger-color; }

@import '~@fortawesome/fontawesome-free/scss/fontawesome';

Size System Customization

// Custom size scale
$fa-size-scale-base: 1.2em;

// Custom named sizes
$fa-xs: 0.8em;
$fa-sm: 1em;
$fa-lg: 1.5em;
$fa-xl: 2em;
$fa-2xl: 2.5em;

// Generate custom size classes
@each $size, $value in (
  'tiny': 0.5em,
  'huge': 4em,
  'massive': 6em
) {
  .fa-#{$size} {
    font-size: $value;
  }
}

Selective Imports

Core Only

// Import only core framework (no icons)
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

Specific Icon Styles

// Import core + solid icons only
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';

Custom Icon Subset

// Import core framework
@import '~@fortawesome/fontawesome-free/scss/_variables';
@import '~@fortawesome/fontawesome-free/scss/_mixins';
@import '~@fortawesome/fontawesome-free/scss/_core';

// Define only needed icons
.fa-user::before { content: $fa-var-user; }
.fa-home::before { content: $fa-var-home; }
.fa-heart::before { content: $fa-var-heart; }

Functions

Icon Unicode Function

@function fa-content($icon-name) {
  @return map-get($fa-icons, $icon-name);
}

Usage:

.custom-icon::before {
  content: fa-content('user');
  font-family: 'Font Awesome 7 Free';
}

Utility Functions

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

@function fa-divide($dividend, $divisor) {
  @return $dividend / $divisor;
}

Build Optimization

Tree Shaking

// Only import needed partials
@import '~@fortawesome/fontawesome-free/scss/_variables';
@import '~@fortawesome/fontawesome-free/scss/_mixins';
@import '~@fortawesome/fontawesome-free/scss/_core';

// Custom icon definitions (smaller subset)
.fa-user::before { content: $fa-var-user; }
.fa-home::before { content: $fa-var-home; }
// ... only icons you need

Custom Font Loading

// Custom font-face definitions
@font-face {
  font-family: 'My Custom FA';
  src: url('custom-subset.woff2') format('woff2');
  font-weight: 900;
  font-display: swap; // Better performance
}

// Override font family
$fa-font-family: 'My Custom FA';

Advanced Customization

CSS Custom Properties Integration

// Generate CSS custom properties
:root {
  --fa-primary: #{$fa-primary-color};
  --fa-border: #{$fa-border-color};
  --fa-inverse: #{$fa-inverse};
}

// Use in styles
.fa-primary { color: var(--fa-primary); }
.fa-border { border-color: var(--fa-border); }

Responsive Icon Sizes

// Responsive sizing mixins
@mixin fa-responsive-size($base-size: 1em) {
  font-size: $base-size;
  
  @media (min-width: 768px) {
    font-size: $base-size * 1.2;
  }
  
  @media (min-width: 1024px) {
    font-size: $base-size * 1.5;
  }
}

// Usage
.responsive-icon {
  @include fa-responsive-size(1em);
}

Custom Animations

// Custom bounce animation
@keyframes fa-bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0,-1px,0);
  }
}

.fa-bounce {
  animation: fa-bounce 1s;
}

docs

css-framework.md

icon-assets.md

index.md

javascript-api.md

scss-customization.md

tile.json