Fontawesome 5 Pro Npm and Webpack Guide

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-iconsnpm 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.adddom.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.