diff --git a/package.json b/package.json
index f6f3753..355a297 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,12 @@
     "unit": "jest --config test/unit/jest.conf.js --coverage"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.0",
+    "@fortawesome/free-brands-svg-icons": "^5.1.0",
+    "@fortawesome/free-regular-svg-icons": "^5.1.0",
+    "@fortawesome/free-solid-svg-icons": "^5.1.0",
+    "@fortawesome/vue-fontawesome": "^0.1.0",
     "bootstrap-vue": "^2.0.0-rc.11",
-    "font-awesome": "^4.7.0",
     "vue": "^2.5.16",
     "vue-router": "^3.0.1"
   },
diff --git a/src/app/app.html b/src/app/app.html
index f03dffc..2f81115 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -6,7 +6,7 @@
 
     <b-collapse is-nav id="nav_collapse">
       <b-navbar-nav class="mr-auto">
-        <b-nav-item use-router :to="{name: 'home'}" exact>Home</b-nav-item>
+        <b-nav-item use-router :to="{name: 'home'}" exact><font-awesome-icon :icon="['fas', 'home']" /></b-nav-item>
         <b-nav-item use-router :to="{name: 'about'}">About</b-nav-item>
         <b-nav-item use-router :to="{name: 'contact'}">Contact</b-nav-item>
         <b-nav-item href="#" disabled>Disabled</b-nav-item>
diff --git a/src/components/home/home.html b/src/components/home/home.html
index fdf827b..eab8a92 100644
--- a/src/components/home/home.html
+++ b/src/components/home/home.html
@@ -5,7 +5,7 @@
       <img src="../../assets/logo.png" alt="Vue logo">
       <h1 class="display-4 mb-4">{{ msg }}</h1>
       <b-button size="lg" variant="primary" href="https://vuejs.org/" target="_blank">
-        Learn more <i class="fa fa-angle-double-right"></i>
+        Learn more <font-awesome-icon :icon="['fas', 'angle-double-right']" />
       </b-button>
     </div>
   </div>
diff --git a/src/main.js b/src/main.js
index b6a41b6..3113f77 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,6 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faHome, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import App from './app/app';
@@ -7,6 +10,8 @@ import './styles/main.scss';
 Vue.config.productionTip = process.env.NODE_ENV === 'production';
 
 Vue.use(BootstrapVue);
+library.add(faHome, faAngleDoubleRight);
+Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 /* eslint-disable no-new */
 new Vue({
diff --git a/src/styles/config/_fonts.scss b/src/styles/config/_fonts.scss
index 0fd7739..af7e41b 100644
--- a/src/styles/config/_fonts.scss
+++ b/src/styles/config/_fonts.scss
@@ -1,4 +1 @@
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
 //@include font-face('FontName', '/assets/fonts/font-file', normal, 400);