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):
node_modules/
└── 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
</style>
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.