Importing and using Font Awesome with Vue

Jul 13, 2019 - 1 min read

There are several reasons to import and self-host Font Awesome:

  • Don’t want to use vue-fontawesome
  • Don’t want to make requests to a CDN
  • Need a self-contained Cordova/PhoneGap application
  • Want control over all assets

Install Font Awesome

npm install @fortawesome/fontawesome-free

Import styles and fonts

After installation, Font Awesome can be found under node_modules (some files omitted):

└── fontawesome-free/
    ├── scss/
    │   └── fontawesome.scss
    └── webfonts/
        ├── fa-solid (ttf, svg, eot, woff, woff2)
        ├── fa-regular...
        └── fa-brands...

Add the following <style> to the App.vue:

// App.vue
<style lang="scss">
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid"; // fas
@import "~@fortawesome/fontawesome-free/scss/regular"; // far
@import "~@fortawesome/fontawesome-free/scss/brands"; // fab

Note: This example is based on Font Awesome 5.9.0 and paths might vary between versions

Show some icons

<i class="fas fa-camera"></i>
<i class="far fa-bell"></i>
<i class="fab fa-css3"></i>

See basic use docs for more info.