Added links as fontawesome icons

beacrea · Sep 22, 2018 · ab0c6b0 · ab0c6b0
1 parent bef9d06
commit ab0c6b0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/client/index.html b/client/index.html
@@ -11,6 +11,8 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-9ralMzdK1QYsk4yBY680hmsb4/hJ98xK3w0TIaJ3ll4POWpWUYaA2bRjGGujGT8w" crossorigin="anonymous">
+
     <!-- Icons -->
     <link rel="icon" type="image/png" href="static/icons/favicon-16x16.png" sizes="16x16">
     <link rel="icon" type="image/png" href="static/icons/favicon-32x32.png" sizes="32x32">

diff --git a/client/src/components/pages/Contact.vue b/client/src/components/pages/Contact.vue
@@ -5,21 +5,21 @@
      <div class="grid">
         <div class="icon">
           <a :href="icon.dribbble.link" target="_blank">
-            <img :src="setIcon(icon.dribbble.asset)" />
+            <i class="fab fa-dribbble"></i>
+            <span>{{icon.dribbble.title}}</span>
           </a>
-          <span>{{icon.dribbble.title}}</span>
         </div>
         <div class="icon">
           <a :href="icon.github.link" target="_blank">
-            <img :src="setIcon(icon.github.asset)" />
+            <i class="fab fa-github"></i>
+            <span>{{icon.github.title}}</span>
           </a>
-          <span>{{icon.github.title}}</span>
         </div>
         <div class="icon">
           <a :href="icon.linkedin.link" target="_blank">
-            <img :src="setIcon(icon.linkedin.asset)" />
+            <i class="fab fa-linkedin"></i>
+            <span>{{icon.linkedin.title}}</span>
           </a>
-          <span>{{icon.linkedin.title}}</span>
         </div>
      </div>
    </section>
@@ -97,12 +97,19 @@ export default {
   grid-column-gap: 1.6rem;
 }
 .icon {
+  i {
+    font-size: 4.0rem;
+    color: white;
+    margin-bottom: 1rem;
+  }
   img {
     max-height: 4.0rem;
     color: white;
   }
   a {
     border-bottom: none;
+    color: white;
+    font-weight: 300;
   }
   & > span {
     font-size: 1.4rem;