fix(resume): add font awesome svg icons

shadow81627 · Dec 16, 2019 · 6d20274 · 6d20274
1 parent 67127bf
commit 6d20274
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 37 deletions.
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -127,7 +127,7 @@ module.exports = {
     // Doc: https://github.com/nuxt-community/dotenv-module
     '@nuxtjs/dotenv',
     '@nuxtjs/markdownit',
-    '@nuxtjs/font-awesome',
+    'nuxt-fontawesome',
     'nuxt-i18n',
     'nuxt-webfontloader',
     [
@@ -160,6 +160,19 @@ module.exports = {
     directivePlugins: ['Tooltip'],
   },
 
+  fontawesome: {
+    imports: [
+      {
+        set: '@fortawesome/free-solid-svg-icons',
+        icons: ['fas'],
+      },
+      {
+        set: '@fortawesome/free-brands-svg-icons',
+        icons: ['fab'],
+      },
+    ],
+  },
+
   i18n: {
     baseUrl: 'https://daim.dev',
     seo: false,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,9 +29,12 @@
     }
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-brands-svg-icons": "^5.12.0",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/vue-fontawesome": "^0.1.9",
     "@nuxtjs/axios": "5.8.0",
     "@nuxtjs/dotenv": "1.4.1",
-    "@nuxtjs/font-awesome": "1.0.4",
     "@nuxtjs/markdownit": "1.2.7",
     "@nuxtjs/pwa": "3.0.0-beta.19",
     "bootstrap": "4.4.1",
@@ -42,6 +45,7 @@
     "github-markdown-css": "3.0.1",
     "koa": "2.11.0",
     "nuxt": "2.10.2",
+    "nuxt-fontawesome": "^0.4.0",
     "nuxt-i18n": "6.4.1",
     "nuxt-webfontloader": "1.1.0",
     "storyblok-nuxt": "1.0.2"

diff --git a/pages/resume.vue b/pages/resume.vue
@@ -79,17 +79,20 @@
             proposition.
           </p>
           <div class="social-icons">
-            <a href="#">
-              <i class="fab fa-linkedin-in"></i>
+            <a href="https://github.com/shadow81627">
+              <font-awesome-icon :icon="['fab', 'github']" />
             </a>
-            <a href="#">
-              <i class="fab fa-github"></i>
+            <a href="https://www.linkedin.com/in/damien-robinson-788925101">
+              <font-awesome-icon :icon="['fab', 'linkedin-in']" />
             </a>
-            <a href="#">
-              <i class="fab fa-twitter"></i>
+            <a href="https://twitter.com/Shadow81627">
+              <font-awesome-icon :icon="['fab', 'twitter']" />
             </a>
-            <a href="#">
-              <i class="fab fa-facebook-f"></i>
+            <a href="https://www.youtube.com/user/shadow81627">
+              <font-awesome-icon :icon="['fab', 'youtube']" />
+            </a>
+            <a href="https://www.facebook.com/damien.robinson.5036">
+              <font-awesome-icon :icon="['fab', 'facebook-f']" />
             </a>
           </div>
         </div>
@@ -176,40 +179,40 @@
           <div class="subheading mb-3">Programming Languages &amp; Tools</div>
           <ul class="list-inline dev-icons">
             <li class="list-inline-item">
-              <i class="fab fa-html5"></i>
-            </li>
-            <li class="list-inline-item">
-              <i class="fab fa-css3-alt"></i>
+              <font-awesome-icon :icon="['fab', 'html5']" title="html5" />
             </li>
             <li class="list-inline-item">
-              <i class="fab fa-js-square"></i>
+              <font-awesome-icon :icon="['fab', 'css3-alt']" title="css3" />
             </li>
             <li class="list-inline-item">
-              <i class="fab fa-angular"></i>
+              <font-awesome-icon
+                :icon="['fab', 'js-square']"
+                title="javastipt"
+              />
             </li>
             <li class="list-inline-item">
-              <i class="fab fa-react"></i>
+              <font-awesome-icon :icon="['fab', 'vuejs']" title="vue" />
             </li>
             <li class="list-inline-item">
-              <i class="fab fa-node-js"></i>
+              <font-awesome-icon :icon="['fab', 'node-js']" title="node" />
             </li>
             <li class="list-inline-item">
-              <i class="fab fa-sass"></i>
+              <font-awesome-icon :icon="['fab', 'sass']" title="sass" />
             </li>
             <li class="list-inline-item">
-              <i class="fab fa-less"></i>
+              <font-awesome-icon :icon="['fab', 'npm']" title="npm" />
             </li>
             <li class="list-inline-item">
-              <i class="fab fa-wordpress"></i>
+              <font-awesome-icon :icon="['fab', 'python']" title="python" />
             </li>
             <li class="list-inline-item">
-              <i class="fab fa-gulp"></i>
+              <font-awesome-icon :icon="['fab', 'laravel']" title="laravel" />
             </li>
             <li class="list-inline-item">
-              <i class="fab fa-grunt"></i>
+              <font-awesome-icon :icon="['fab', 'docker']" title="docker" />
             </li>
             <li class="list-inline-item">
-              <i class="fab fa-npm"></i>
+              <font-awesome-icon :icon="['fab', 'aws']" title="aws" />
             </li>
           </ul>