CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-font-awesome

The iconic font and CSS framework providing 675 scalable vector icons for web development

—

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

index.mddocs/

Font Awesome

Font Awesome is the iconic font and CSS framework providing 675 scalable vector icons for web development. It delivers a complete suite of pictographic icons through web fonts in multiple formats along with CSS classes for easy implementation, animation, and styling effects.

Package Information

  • Package Name: font-awesome
  • Package Type: npm
  • Language: CSS/LESS/SCSS
  • Installation: npm install font-awesome
  • CDN: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Core Imports

CSS Import

@import "font-awesome/css/font-awesome.css";

HTML Link

<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">

LESS Import

@import "font-awesome/less/font-awesome.less";

SCSS Import

@import "font-awesome/scss/font-awesome.scss";

Basic Usage

<!-- Basic icon -->
<i class="fa fa-home"></i>

<!-- Sized icon -->
<i class="fa fa-user fa-2x"></i>

<!-- Animated spinning icon -->
<i class="fa fa-spinner fa-spin"></i>

<!-- Icon with styling -->
<i class="fa fa-heart fa-lg" style="color: red;"></i>

<!-- Fixed-width icon for alignment -->
<div><i class="fa fa-home fa-fw"></i> Home</div>
<div><i class="fa fa-user fa-fw"></i> Profile</div>

Capabilities

Base Icon Class

The foundational class required for all Font Awesome icons.

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Icon Size Classes

Classes for scaling icons to different sizes.

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }
.fa-4x { font-size: 4em; }
.fa-5x { font-size: 5em; }

Usage Examples:

<i class="fa fa-home fa-lg"></i>    <!-- 33% larger -->
<i class="fa fa-home fa-2x"></i>    <!-- 2x size -->
<i class="fa fa-home fa-3x"></i>    <!-- 3x size -->
<i class="fa fa-home fa-4x"></i>    <!-- 4x size -->
<i class="fa fa-home fa-5x"></i>    <!-- 5x size -->

Layout Classes

Classes for icon positioning and alignment.

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

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

.fa-li {
  position: absolute;
  left:   -2.14285714em;
  width:  2.14285714em;
  top:    0.14285714em;
  text-align: center;
}

.fa-li.fa-lg {
  left: -1.85714286em;
}

Usage Examples:

<!-- Fixed-width icons for alignment -->
<div class="list">
  <div><i class="fa fa-home fa-fw"></i> Home</div>
  <div><i class="fa fa-user fa-fw"></i> Profile</div>
  <div><i class="fa fa-gear fa-fw"></i> Settings</div>
</div>

<!-- Icons as list bullets -->
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List item</li>
  <li><i class="fa-li fa fa-check-square"></i>List item</li>
  <li><i class="fa-li fa fa-square-o"></i>List item</li>
</ul>

Border and Float Classes

Classes for adding borders and floating icons.

.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eeeeee;
  border-radius: .1em;
}

.fa-pull-left {
  float: left;
}

.fa-pull-right {
  float: right;
}

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

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

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

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

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

Usage Examples:

<!-- Bordered icon -->
<i class="fa fa-quote fa-border"></i>

<!-- Floating icons with text wrapping -->
<p>
  <i class="fa fa-quote fa-3x fa-pull-left fa-border"></i>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>

<p>
  <i class="fa fa-quote fa-3x fa-pull-right fa-border"></i>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>

Animation Classes

Classes for animating icons.

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

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

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

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

Usage Examples:

<!-- Spinning icons for loading states -->
<i class="fa fa-spinner fa-spin"></i> Loading...
<i class="fa fa-circle-o-notch fa-spin"></i> Saving...
<i class="fa fa-refresh fa-spin"></i> Refreshing...

<!-- Pulsing animation -->
<i class="fa fa-spinner fa-pulse"></i> Processing...

Rotation and Flip Classes

Classes for rotating and flipping icons.

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

Usage Examples:

<!-- Rotated icons -->
<i class="fa fa-shield"></i>             <!-- normal -->
<i class="fa fa-shield fa-rotate-90"></i>  <!-- rotated 90 degrees -->
<i class="fa fa-shield fa-rotate-180"></i> <!-- rotated 180 degrees -->
<i class="fa fa-shield fa-rotate-270"></i> <!-- rotated 270 degrees -->

<!-- Flipped icons -->
<i class="fa fa-shield fa-flip-horizontal"></i> <!-- flipped horizontally -->
<i class="fa fa-shield fa-flip-vertical"></i>   <!-- flipped vertically -->

Icon Stacking

Classes for layering icons to create combined symbols.

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

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

.fa-stack-1x {
  line-height: inherit;
}

.fa-stack-2x {
  font-size: 2em;
}

.fa-inverse {
  color: #ffffff;
}

Usage Examples:

<!-- Stacked icons -->
<span class="fa-stack fa-lg">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <i class="fa fa-home fa-stack-1x"></i>
</span>

<!-- Icon with background -->
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

<!-- Notification badge -->
<span class="fa-stack">
  <i class="fa fa-twitter fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

Screen Reader Classes

Accessibility classes for screen reader support.

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

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

Usage Examples:

<!-- Screen reader text -->
<button>
  <i class="fa fa-home" aria-hidden="true"></i>
  <span class="sr-only">Home</span>
</button>

<!-- Focusable screen reader text -->
<a href="#main" class="sr-only-focusable">Skip to main content</a>

Icon Classes

Font Awesome provides 675 icon classes. Here are representative examples from major categories:

Web Application Icons

.fa-home:before { content: "\f015"; }
.fa-user:before { content: "\f007"; }
.fa-search:before { content: "\f002"; }
.fa-envelope:before { content: "\f0e0"; }
.fa-envelope-o:before { content: "\f003"; }
.fa-heart:before { content: "\f004"; }
.fa-heart-o:before { content: "\f08a"; }
.fa-star:before { content: "\f005"; }
.fa-star-o:before { content: "\f006"; }
.fa-gear:before,
.fa-cog:before { content: "\f013"; }
.fa-trash:before { content: "\f1f8"; }
.fa-trash-o:before { content: "\f014"; }
.fa-download:before { content: "\f019"; }
.fa-upload:before { content: "\f093"; }

Form Control Icons

.fa-check:before { content: "\f00c"; }
.fa-times:before,
.fa-remove:before,
.fa-close:before { content: "\f00d"; }
.fa-plus:before { content: "\f067"; }
.fa-minus:before { content: "\f068"; }
.fa-edit:before,
.fa-pencil-square-o:before { content: "\f044"; }
.fa-save:before,
.fa-floppy-o:before { content: "\f0c7"; }
.fa-print:before { content: "\f02f"; }
.fa-copy:before,
.fa-files-o:before { content: "\f0c5"; }
.fa-cut:before,
.fa-scissors:before { content: "\f0c4"; }

Directional Icons

.fa-arrow-up:before { content: "\f062"; }
.fa-arrow-down:before { content: "\f063"; }
.fa-arrow-left:before { content: "\f060"; }
.fa-arrow-right:before { content: "\f061"; }
.fa-chevron-up:before { content: "\f077"; }
.fa-chevron-down:before { content: "\f078"; }
.fa-chevron-left:before { content: "\f053"; }
.fa-chevron-right:before { content: "\f054"; }

Media Player Icons

.fa-play:before { content: "\f04b"; }
.fa-pause:before { content: "\f04c"; }
.fa-stop:before { content: "\f04d"; }
.fa-fast-forward:before { content: "\f050"; }
.fa-fast-backward:before { content: "\f049"; }
.fa-step-forward:before { content: "\f051"; }
.fa-step-backward:before { content: "\f048"; }
.fa-volume-up:before { content: "\f028"; }
.fa-volume-down:before { content: "\f027"; }
.fa-volume-off:before { content: "\f026"; }

Brand Icons

.fa-facebook:before,
.fa-facebook-f:before { content: "\f09a"; }
.fa-twitter:before { content: "\f099"; }
.fa-google:before { content: "\f1a0"; }
.fa-google-plus:before { content: "\f0d5"; }
.fa-github:before { content: "\f09b"; }
.fa-linkedin:before { content: "\f0e1"; }
.fa-youtube:before { content: "\f167"; }
.fa-instagram:before { content: "\f16d"; }
.fa-pinterest:before { content: "\f0d2"; }
.fa-reddit:before { content: "\f1a1"; }

File Type Icons

.fa-file:before { content: "\f15b"; }
.fa-file-o:before { content: "\f016"; }
.fa-file-text:before { content: "\f15c"; }
.fa-file-text-o:before { content: "\f0f6"; }
.fa-file-pdf-o:before { content: "\f1c1"; }
.fa-file-word-o:before { content: "\f1c2"; }
.fa-file-excel-o:before { content: "\f1c3"; }
.fa-file-powerpoint-o:before { content: "\f1c4"; }
.fa-file-image-o:before,
.fa-file-photo-o:before,
.fa-file-picture-o:before { content: "\f1c5"; }
.fa-file-video-o:before,
.fa-file-movie-o:before { content: "\f1c8"; }
.fa-file-audio-o:before,
.fa-file-sound-o:before { content: "\f1c7"; }
.fa-file-code-o:before { content: "\f1c9"; }
.fa-file-archive-o:before,
.fa-file-zip-o:before { content: "\f1c6"; }

Text Editor Icons

.fa-bold:before { content: "\f032"; }
.fa-italic:before { content: "\f033"; }
.fa-underline:before { content: "\f0cd"; }
.fa-strikethrough:before { content: "\f0cc"; }
.fa-align-left:before { content: "\f036"; }
.fa-align-center:before { content: "\f037"; }
.fa-align-right:before { content: "\f038"; }
.fa-align-justify:before { content: "\f039"; }
.fa-list:before { content: "\f03a"; }
.fa-list-ul:before { content: "\f0ca"; }
.fa-list-ol:before { content: "\f0cb"; }
.fa-indent:before { content: "\f03c"; }
.fa-outdent:before,
.fa-dedent:before { content: "\f03b"; }

Currency Icons

.fa-dollar:before,
.fa-usd:before { content: "\f155"; }
.fa-euro:before,
.fa-eur:before { content: "\f153"; }
.fa-gbp:before { content: "\f154"; }
.fa-yen:before,
.fa-jpy:before,
.fa-cny:before,
.fa-rmb:before { content: "\f157"; }
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before { content: "\f158"; }
.fa-won:before,
.fa-krw:before { content: "\f159"; }
.fa-bitcoin:before,
.fa-btc:before { content: "\f15a"; }

Usage Examples:

<!-- Web application icons -->
<i class="fa fa-home"></i>
<i class="fa fa-user"></i>
<i class="fa fa-search"></i>
<i class="fa fa-envelope"></i>

<!-- Form controls -->
<button><i class="fa fa-save"></i> Save</button>
<button><i class="fa fa-print"></i> Print</button>
<button><i class="fa fa-download"></i> Download</button>
<button><i class="fa fa-copy"></i> Copy</button>

<!-- Navigation -->
<a href="#prev"><i class="fa fa-chevron-left"></i> Previous</a>
<a href="#next">Next <i class="fa fa-chevron-right"></i></a>

<!-- Media controls -->
<button><i class="fa fa-play"></i></button>
<button><i class="fa fa-pause"></i></button>
<button><i class="fa fa-stop"></i></button>

<!-- Social media -->
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-github"></i></a>

<!-- File types -->
<i class="fa fa-file-pdf-o"></i> PDF
<i class="fa fa-file-word-o"></i> Word
<i class="fa fa-file-excel-o"></i> Excel

<!-- Text editor -->
<button><i class="fa fa-bold"></i></button>
<button><i class="fa fa-italic"></i></button>
<button><i class="fa fa-underline"></i></button>

<!-- Currency -->
<span>$100 <i class="fa fa-dollar"></i></span>
<span>€50 <i class="fa fa-euro"></i></span>
<span>₿0.001 <i class="fa fa-bitcoin"></i></span>

Class Reference Summary

Font Awesome includes the following types of utility classes that can be combined:

Base Classes

.fa                    /* Required base class for all icons */

Size Classes

.fa-lg                 /* 33% larger (1.33em) */
.fa-2x                 /* 2x size */
.fa-3x                 /* 3x size */
.fa-4x                 /* 4x size */
.fa-5x                 /* 5x size */

Layout Classes

.fa-fw                 /* Fixed-width for alignment */
.fa-ul                 /* Unordered list container */
.fa-li                 /* List item icon */
.fa-border             /* Add border around icon */
.fa-pull-left          /* Float left with margin */
.fa-pull-right         /* Float right with margin */
.pull-left             /* Legacy Bootstrap compatibility */
.pull-right            /* Legacy Bootstrap compatibility */

Animation Classes

.fa-spin               /* Continuous rotation */
.fa-pulse              /* 8-step rotation */

Transform Classes

.fa-rotate-90          /* Rotate 90 degrees */
.fa-rotate-180         /* Rotate 180 degrees */
.fa-rotate-270         /* Rotate 270 degrees */
.fa-flip-horizontal    /* Flip horizontally */
.fa-flip-vertical      /* Flip vertically */

Stacking Classes

.fa-stack              /* Stack container (2em x 2em) */
.fa-stack-1x           /* Normal size icon in stack */
.fa-stack-2x           /* 2x size icon in stack (background) */
.fa-inverse            /* White text for stacked icons */

Accessibility Classes

.sr-only               /* Screen reader only */
.sr-only-focusable     /* Visible when focused */

Usage Pattern:

<i class="fa fa-[icon-name] [size] [layout] [animation] [transform]"></i>

Examples:

<i class="fa fa-home fa-2x fa-fw fa-spin"></i>
<i class="fa fa-star fa-lg fa-pull-left fa-rotate-90"></i>

LESS Preprocessor Variables

Core configuration variables for customizing Font Awesome with LESS.

@fa-font-path:        "../fonts";
@fa-font-size-base:   14px;
@fa-line-height-base: 1;
@fa-css-prefix:       fa;
@fa-version:          "4.7.0";
@fa-border-color:     #eee;
@fa-inverse:          #fff;
@fa-li-width:         (30em / 14);

Icon Unicode Variables

Each icon has a corresponding LESS variable with its Unicode value:

@fa-var-home: "\f015";
@fa-var-user: "\f007";
@fa-var-search: "\f002";
@fa-var-envelope: "\f0e0";
@fa-var-heart: "\f004";
@fa-var-star: "\f005";
@fa-var-star-o: "\f006";
@fa-var-check: "\f00c";
@fa-var-times: "\f00d";
@fa-var-plus: "\f067";
@fa-var-minus: "\f068";

Usage Examples:

// Customize font path
@fa-font-path: "/assets/fonts";

// Use icon variables
.my-icon:before {
  content: @fa-var-home;
  color: #333;
}

// Custom prefix
@fa-css-prefix: icon;
// This will generate .icon-home instead of .fa-home

LESS Mixins

Utility mixins for creating custom icon styles.

.fa-icon() {
  display: inline-block;
  font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-icon-rotate(@degrees, @rotation) {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
  -webkit-transform: rotate(@degrees);
  -ms-transform: rotate(@degrees);
  transform: rotate(@degrees);
}

.fa-icon-flip(@horiz, @vert, @rotation) {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
  -webkit-transform: scale(@horiz, @vert);
  -ms-transform: scale(@horiz, @vert);
  transform: scale(@horiz, @vert);
}

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

.sr-only-focusable() {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

Usage Examples:

// Create custom icon element
.my-custom-icon {
  .fa-icon();
  &:before {
    content: @fa-var-star;
  }
}

// Create rotated icon
.rotated-icon {
  .fa-icon-rotate(45deg, 0.5);
}

// Screen reader only text
.visually-hidden {
  .sr-only();
}

SCSS Preprocessor Variables

Core configuration variables for customizing Font Awesome with SCSS.

$fa-font-path:        "../fonts" !default;
$fa-font-size-base:   14px !default;
$fa-line-height-base: 1 !default;
$fa-css-prefix:       fa !default;
$fa-version:          "4.7.0" !default;
$fa-border-color:     #eee !default;
$fa-inverse:          #fff !default;
$fa-li-width:         (30em / 14) !default;

Icon Unicode Variables

Each icon has a corresponding SCSS variable with its Unicode value:

$fa-var-home: "\f015";
$fa-var-user: "\f007";
$fa-var-search: "\f002";
$fa-var-envelope: "\f0e0";
$fa-var-heart: "\f004";
$fa-var-star: "\f005";
$fa-var-star-o: "\f006";
$fa-var-check: "\f00c";
$fa-var-times: "\f00d";
$fa-var-plus: "\f067";
$fa-var-minus: "\f068";

Usage Examples:

// Customize variables before import
$fa-font-path: "/assets/fonts";
$fa-css-prefix: icon;
@import "font-awesome/scss/font-awesome";

// Use icon variables
.my-icon:before {
  content: $fa-var-home;
  color: #333;
}

SCSS Mixins

Utility mixins for creating custom icon styles.

@mixin fa-icon() {
  display: inline-block;
  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin fa-icon-rotate($degrees, $rotation) {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
  -webkit-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  transform: rotate($degrees);
}

@mixin fa-icon-flip($horiz, $vert, $rotation) {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
  -webkit-transform: scale($horiz, $vert);
  -ms-transform: scale($horiz, $vert);
  transform: scale($horiz, $vert);
}

@mixin sr-only() {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

@mixin sr-only-focusable() {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

Usage Examples:

// Create custom icon element
.my-custom-icon {
  @include fa-icon();
  &:before {
    content: $fa-var-star;
  }
}

// Create rotated icon
.rotated-icon {
  @include fa-icon-rotate(45deg, 0.5);
}

// Screen reader only text
.visually-hidden {
  @include sr-only();
}

Font Files

Font Awesome includes multiple font formats for cross-browser compatibility:

fonts/
├── FontAwesome.otf              # OpenType font
├── fontawesome-webfont.eot      # Embedded OpenType (IE8-)
├── fontawesome-webfont.svg      # SVG font (legacy iOS)  
├── fontawesome-webfont.ttf      # TrueType font
├── fontawesome-webfont.woff     # Web Open Font Format
└── fontawesome-webfont.woff2    # Web Open Font Format 2.0

The CSS automatically includes all formats for maximum browser compatibility:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
       url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
       url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Browser Compatibility

Font Awesome 4.7.0 provides comprehensive cross-browser support through multiple font formats and fallback strategies.

Supported Browsers

Desktop Browsers

  • Chrome 4+ - Full support with WOFF2/WOFF
  • Firefox 3.5+ - Full support with WOFF2/WOFF
  • Safari 3+ - Full support with WOFF2/WOFF/TTF
  • Opera 10+ - Full support with WOFF2/WOFF
  • Internet Explorer 8+ - Full support with EOT fallback
    • IE8: EOT format
    • IE9+: WOFF format
  • Edge 12+ - Full support with WOFF2

Mobile Browsers

  • iOS Safari 3.2+ - Full support
    • iOS 4.3+: WOFF format
    • iOS 3.2-4.2: SVG format fallback
  • Android Browser 2.2+ - Full support
    • Android 4.4+: WOFF format
    • Android 2.2-4.3: TTF format
  • Chrome Mobile - Full support
  • Firefox Mobile - Full support

Font Format Support

The CSS includes multiple font formats in order of preference:

  1. WOFF2 - Modern browsers (Chrome 36+, Firefox 39+, Safari 12+)
  2. WOFF - Wider browser support (IE9+, all modern browsers)
  3. TTF - Fallback for older mobile browsers
  4. EOT - Internet Explorer 8 and below
  5. SVG - Legacy iOS Safari (iOS 3.2-4.2)

Accessibility Features

  • Screen reader support - Icons are hidden from screen readers by default
  • ARIA attributes - Use aria-hidden="true" on decorative icons
  • Text alternatives - Provide text content with .sr-only class
  • Focus management - .sr-only-focusable for skip links

Performance Considerations

  • Font preloading - Consider using <link rel="preload"> for better performance
  • Subset loading - Font Awesome includes all 675+ icons; consider custom builds for smaller file sizes
  • CDN delivery - Use CDN for faster loading and caching
  • Local hosting - Host fonts locally to avoid external dependencies

Common Integration Issues

Missing Icons (Square boxes):

  • Ensure font files are accessible at the correct path
  • Check CORS headers for cross-domain font loading
  • Verify Content-Type headers for font files

Performance Issues:

  • Icons may flash or appear unstyled initially
  • Use font-display: swap for better perceived performance
  • Consider inlining critical icons as SVG

Accessibility Issues:

  • Don't rely solely on icons for meaning
  • Provide text alternatives for informational icons
  • Use appropriate ARIA labels for interactive icons

docs

index.md

tile.json