feat: Replace font-awesome

_data/social.yml

@@ -1,9 +1,9 @@
 - title: "Alex's Twitter.com profile"
   url: "https://twitter.com/antoligy"
-  glyph: "fa-twitter"
+  svg: "/svg/twitter.svg"
 - title: "Alex's LinkedIn.com profile"
   url: "https://www.linkedin.com/in/alex-"
-  glyph: "fa-linkedin"
+  svg: "/svg/linkedin.svg"
 - title: "Alex's Github.com profile"
   url: "https://github.com/antoligy"
-  glyph: "fa-github"
+  svg: "/svg/github.svg"

_includes/component/footer.html

@@ -3,7 +3,9 @@
         <span class="text-muted">
         &copy; Alex Wilson {{ "now"|date: '%Y' }}
         {% for item in site.data.social %}
-            <a href="{{ item.url }}" class="fa text-muted {{ item.glyph }}"></a>
+            <a class="footer__social-link" href="{{ item.url }}" title="{{ item.title }}">
+                <img src="{{ item.svg }}" alt="{{ item.title }}" class="footer__social-link" />
+            </a>
         {% endfor %}
         </span>
     </div>

_includes/component/header.html

@@ -19,7 +19,9 @@ <h1 class="alex-header__name">Alex Wilson</h1>
             <li class="alex-header__nav-item alex-header__nav-item--spacer"></li>
             {% for item in site.data.social %}
             <li class="alex-header__nav-item">
-                <a href="{{ item.url }}" class="fa large {{ item.glyph }}" title="{{ item.title }}"></a>
+                <a title="{{ item.title }}" href="{{ item.url }}">
+                    <img src="{{ item.svg }}" class="large" alt="{{ item.title }}" height="1em" />
+                </a>
             </li>
             {% endfor %}
         </ul>

_includes/component/pager.html

@@ -5,9 +5,7 @@
 		{% if paginator.previous_page %}
 			href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' | replace: 'index.html', '' }}"
 		{% endif %}
-		>
-			<i class="fa fa-chevron-left"></i> Prev
-		</a>
+		>&lsaquo; Prev</a>
 	</li>
 
 	{% for page in (1..paginator.total_pages) %}
@@ -38,9 +36,7 @@
 		{% if paginator.next_page %}
 			href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' | replace: 'index.html', '' }}"
 		{% endif %}
-		>
-			Next <i class="fa fa-chevron-right"></i>
-		</a>
+		>Next &rsaquo;</a>
 	</li>
 
 </ul>

_includes/component/share.html

@@ -1,19 +1,24 @@
 <div class="alex-share">
 	<ul>
 		<li>
-			<a class="fa fa-2x fa-twitter-square" href="https://twitter.com/intent/tweet?url={{site.url}}{{page.url}}&amp;text={{page.title}}&amp;related=antoligy&amp;via=antoligy"></a>
+			<a href="https://twitter.com/intent/tweet?url={{site.url}}{{page.url}}&amp;text={{page.title}}&amp;related=antoligy&amp;via=antoligy">
+				<img src="/svg/twitter.svg" title="Share on Twitter" />
+			</a>
 		</li>
 		<li>
-			<a class="fa fa-2x fa-facebook-square" href="http://www.facebook.com/sharer.php?u={{site.url}}{{page.url}}&amp;t={{page.title}}"></a>
+			<a href="http://www.facebook.com/sharer.php?u={{site.url}}{{page.url}}&amp;t={{page.title}}">
+				<img src="/svg/facebook.svg" title="Share on Twitter" />
+			</a>
 		</li>
 		<li>
-			<a class="fa fa-2x fa-linkedin-square" href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{site.url}}{{page.url}}&amp;title={{page.title}}"></a>
+			<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={{site.url}}{{page.url}}&amp;title={{page.title}}">
+				<img src="/svg/linkedin.svg" title="Share on LinkedIn" />
+			</a>
 		</li>
 		<li>
-			<a class="fa fa-2x fa-google-plus-square" href="https://plus.google.com/share?url={{site.url}}{{page.url}}"></a>
-		</li>
-		<li>
-			<a class="fa fa-2x fa-reddit-square" href="http://reddit.com/submit?url={{site.url}}{{page.url}}&amp;title={{page.title}}"></a>
+			<a href="http://reddit.com/submit?url={{site.url}}{{page.url}}&amp;title={{page.title}}">
+				<img src="/svg/reddit.svg" title="Share on Reddit" />
+			</a>
 		</li>
 	</ul>
 </div>

_includes/webpack.html

@@ -1,6 +1,6 @@
 <style>html { font-family: sans-serif; } .wf-loading { font-family: sans-serif !important; }</style>
-<link rel="stylesheet" type="text/css" href="/dist/main.06105d36baae31b5be57.css"></link>
-<script src="/dist/main.06105d36baae31b5be57.js" async="async"></script>
+<link rel="stylesheet" type="text/css" href="/dist/main.6186d568ffb425a088c0.css"></link>
+<script src="/dist/main.6186d568ffb425a088c0.js" async="async"></script>
 <script type="text/javascript" data-no-instant>
   function fire() {
     document.dispatchEvent(new CustomEvent('a.load'));

package.json

@@ -21,7 +21,6 @@
     "bootstrap": "^4.0.0-alpha.2",
     "bootstrap-sass": "^3.3.7",
     "file-loader": "^1.1.11",
-    "font-awesome": "^4.6.3",
     "handlebars-loader": "^1.4.0",
     "include-media": "^1.4.9",
     "instantclick2": "~1.1.0",

src/scss/alex/_footer.scss

@@ -0,0 +1,9 @@
+.footer {
+    color: $grey-4;
+}
+
+.footer__social-link {
+    filter: brightness(2);
+    height: .8rem;
+    width: .8rem;
+}

src/scss/alex/_header.scss

@@ -75,8 +75,12 @@
         border-bottom: #AAA solid 0.5rem;
       }
 
-      &.large {
-        font-size: 2rem;
+      img.large {
+        filter: invert(1);
+        height: 1.6rem;
+        width: 1.6rem;
+        padding: 0.25rem 0;
+        margin: -1rem 0;
       }
     }
   }

src/scss/alex/_share.scss

@@ -7,6 +7,11 @@
 
         li {
             display: inline;
+
+            img {
+                height: 2rem;
+                width: 2rem;
+            }
         }
     }
 }

src/scss/main.scss

@@ -16,6 +16,7 @@
 @import "alex/typography";
 @import "alex/layout";
 @import "alex/header";
+@import "alex/footer";
 @import "alex/forms";
 @import "alex/buttons";
 @import "alex/pager";
@@ -25,18 +26,6 @@
 @import "alex/listing";
 @import "alex/cards";
 
-// Font Awesome
-@import "font-awesome";
-
-/* Override for font-awesome :( */
-.fa-inverse {
-	color: $orange-2 !important;
-}
-
-.text-muted {
-	color: #777 !important;
-}
-
 .panel {
 	background: $brand;
 }