Use custom fonts

Font-awesome although is in fact awesome, is massive. We're not using
every single icon, in fact, we're using only 4 out of 675... It's
unreasonable to keep using it.

We're preparing our own font and styling, to keep the same approach,
with much less MB to be loaded.

It also, fixes the issue with [go-libsas][1] we're having, allowing us
to move forward with the application.

[1]: wellington/go-libsass#52

.gitignore

@@ -7,5 +7,4 @@ npm-debug.log
 db/dbconf.yml
 vendor/
 cache/
-fonts/
 test/public/

config.yml

@@ -8,16 +8,10 @@ keywords: php, html, css, scss, javascript, js, mysql, go, web, developer, engla
 version: 2.1.0
 inline:
   initial_css: public/css/app.css
-copy:
-  - name: font-awesome
-    src: node_modules/font-awesome/fonts/*
-    dest: public/fonts
-    force: true
 sass:
   include_paths:
     - scss
     - node_modules/bourbon/app/assets/stylesheets
-    - node_modules/font-awesome/scss
     - node_modules/susy/sass
   compile:
     - name: app

package.json

@@ -15,7 +15,6 @@
   "homepage": "https://github.com/paroxp/rafalp#readme",
   "devDependencies": {
     "bourbon": "^4.3.4",
-    "font-awesome": "^4.7.0",
     "susy": "^2.2.12"
   }
 }

scss/_icons.scss

@@ -0,0 +1,56 @@
+@font-face {
+  font-family: "Social";
+  src: url("./fonts/icons.eot");
+  src: url("./fonts/icons.eot?#iefix") format("embedded-opentype"), url("./fonts/icons.woff") format("woff"), url("./fonts/icons.ttf") format("truetype"), url("./fonts/icons.svg#icon") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+   @font-face{
+    font-family: "Social";
+    src: url("./fonts/icons.svg#icon") format("svg");
+  }
+}
+
+.icon {
+  &:before {
+    display: inline-block;
+    font-family: "Social";
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    line-height: 1;
+    text-decoration: inherit;
+    text-rendering: optimizeLegibility;
+    text-transform: none;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+  }
+
+  &.envelope:before {
+    content: "\f100";
+  }
+
+  &.spotify:before {
+    content: "\f101";
+  }
+
+  &.github:before {
+    content: "\f102";
+  }
+
+  &.twitter:before {
+    content: "\f103";
+  }
+
+  &.linkedin:before {
+    content: "\f104";
+  }
+}
+$icon-envelope: "\f100";
+$icon-spotify: "\f101";
+$icon-github: "\f102";
+$icon-twitter: "\f103";
+$icon-linkedin: "\f104";

scss/_structure.scss

@@ -212,7 +212,7 @@ body {
       }
     }
 
-    .social {
+    .icons {
       cursor: default;
       @include user-select(none);
 

scss/_variables.scss

@@ -51,6 +51,3 @@ $social: (
 $mobile: 20em;
 $tablet: 48rem;
 $desktop: 60rem;
-
-// Font Awesome
-$fa-font-path: "../node_modules/font-awesome/fonts" !default;

scss/app.scss

@@ -3,14 +3,14 @@
 
 // Include some toolkits.
 @import "bourbon";
-@import "font-awesome";
 @import "susy";
 
 // Import our dependencies.
 @import "methods";
 
 // Import rest of our styles.
 @import "global";
+@import "icons";
 @import "page/about";
 @import "page/home";
 @import "structure";

templates/master.html

@@ -72,25 +72,25 @@ <h2>Web Developer</h2>
 <div class="notification-stack"></div>
 
 <footer>
-    <ul class="social">
+    <ul class="icons">
         <li>
             <a href="//github.com/paroxp" target="_blank" rel="external nofollow" title="GitHub">
-                <i class="fa fa-github"></i>
+                <i class="icon github"></i>
             </a>
         </li>
         <li>
             <a href="//twitter.com/paroxp" target="_blank" rel="external nofollow" title="Twitter">
-                <i class="fa fa-twitter"></i>
+                <i class="icon twitter"></i>
             </a>
         </li>
         <li>
             <a href="//linkedin.com/in/rafał-proszowski-78816744" target="_blank" rel="external nofollow" title="LinkedIn">
-                <i class="fa fa-linkedin"></i>
+                <i class="icon linkedin"></i>
             </a>
         </li>
         <li>
             <a href="//play.spotify.com/user/1151201520" target="_blank" rel="external nofollow" title="Spotify">
-                <i class="fa fa-spotify"></i>
+                <i class="icon spotify"></i>
             </a>
         </li>
     </ul>