Fontawesome 5 Pro Npm and Webpack Guide

August 21, 2018

This is a refresh/update from the old guide.

Include all CSS/JS

npm install --save @fortawesome/fontawesome-free
import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'

For Pro, refer Installing the Pro version of Font Awesome to get your token.

npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" <TOKEN>

npm install --save @fortawesome/fontawesome-pro
import '@fortawesome/fontawesome-pro/css/all.css'
import '@fortawesome/fontawesome-pro/js/all.js'

Custom Import

npm install --save @fortawesome/fontawesome-svg-core

Select icon packages

npm install --save @fortawesome/free-brands-svg-icons
npm install --save @fortawesome/pro-solid-svg-icons

NOTE: refer above for pro npm token registration

Import entire icon set.

import { library } from '@fortawesome/fontawesome-svg-core'
import fas from '@fortawesome/pro-solid-svg-icons'

library.add(fas)

Selective import (reduce webpack bundle size).

import { library } from '@fortawesome/fontawesome-svg-core'

import { faUser, faPlus } from '@fortawesome/pro-solid-svg-icons'
import { faTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons'

library.add(faUser, faPlus, faTwitter, faFacebookF)

If you using the icons as <i class="fas fa-user"></i> in html, you need to call dom.i2svg to conver <i> to <svg>.

import { dom, library } from '@fortawesome/fontawesome-svg-core'

// after library.add

dom.i2svg()

NOTE: use dom.watch if you plan to dynamically add <i> icon tag.

Vue.js

NOTE: Refer to latest Using FontAwesome 5.1.x for Vue.js guide.

npm i --save @fortawesome/vue-fontawesome
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)
<template>
  <font-awesome-icon icon="coffee" />
  <!-- or -->
  <font-awesome-icon :icon="['fas', 'coffee']" />
</template>

NOTE: Refer to vue-fontawesome.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.