Install the packages
Install the core package (provides the functionality but not any icons):
yarn add @fortawesome/fontawesome-svg-core
And one or more icon sets 15, depending on which icons you want:
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/pro-solid-svg-icons
yarn add @fortawesome/pro-regular-svg-icons
yarn add @fortawesome/pro-light-svg-icons
Want to use the pro packages? See the final section of this guide.
Set up the icons in your JavaScript
Wherever you prefer in your JS, import the needed modules. Unless you’re going to be using a lot of icons, it’s probably best to import the specific icons you’ll use.
For example, we’ll import the Facebook and Twitter icons in main.js:
// import then needed Font Awesome functionality
import { library, dom } from '@fortawesome/fontawesome-svg-core';
// import the Facebook and Twitter icons
import { faFacebook, faTwitter } from "@fortawesome/free-brands-svg-icons";
// add the imported icons to the library
library.add(faFacebook, faTwitter);
// tell FontAwesome to watch the DOM and add the SVGs when it detects icon markup
dom.watch();
You can also import an entire icon set at once, but that will result in a much larger bundle for your users to download. If you’ve thought through the performance implications and you have a good reason to do it anyway, see here 17.
Add the icon markup to your templates
In the appropriate template file:
<!-- Facebook icon -->
<i class="fab fa-facebook"></i>
<!-- Twitter icon -->
<i class="fab fa-twitter"></i>
Build
Finally, run yarn build.