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" config set "//" <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 if you plan to dynamically add <i> icon tag.


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.

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.