Font Awesome 5 🎉

Makefile

@@ -17,7 +17,6 @@ build: install
 	hugo gen chromastyles --style=monokai > $(STATIC_SRC)/scss/highlight.css
 	$(NODE_BIN)/browserify $(STATIC_SRC)/js/index.js -o $(STATIC_BUILD)/js/app.js
 	$(NODE_BIN)/node-sass $(STATIC_SRC)/scss/style.scss $(STATIC_BUILD)/css/style.css --source-map-embed
-	cp -r $(BASEDIR)/node_modules/font-awesome/fonts $(STATIC_BUILD)/fonts
 	cp -r $(BASEDIR)/node_modules/lightgallery/dist/fonts $(STATIC_BUILD)
 	cp -r $(STATIC_SRC)/img $(STATIC_BUILD)/img
 	@hugo -vDEF --stepAnalysis

data/social.yml

@@ -4,67 +4,67 @@ accounts:
     name: GitHub
     username: RealOrangeOne
     link: https://github.com/RealOrangeOne/
-    icon: fa-github
+    icon: fab fa-github
 
   twitter:
     name: Twitter
     username: RealOrangeOne
     link: https://twitter.com/RealOrangeOne/
-    icon: fa-twitter
+    icon: fab fa-twitter
 
   reddit:
     name: Reddit
     username: RealOrangeOne
     link: https://reddit.com/u/RealOrangeOne/
-    icon: fa-reddit
+    icon: fab fa-reddit
 
   flickr:
     name: Flickr
     username: TheOrangeOne
     link: https://flickr.com/photos/TheOrangeOne/
-    icon: fa-flickr
+    icon: fab fa-flickr
 
   bitbucket:
     name: BitBucket
     username: TheOrangeOne
     link: https://bitbucket.com/TheOrangeOne/
-    icon: fa-bitbucket
+    icon: fab fa-bitbucket
 
   trello:
     name: Trello
     username: TheOrangeOne
     link: https://trello.com/TheOrangeOne/
-    icon: fa-trello
+    icon: fab fa-trello
 
   freenode:
     name: Freenode
     username: TheOrangeOne
     link: https://webchat.freenode.net/
-    icon: fa-rss
+    icon: fas fa-rss
 
   pcpartpicker:
     name: PCPartPicker
     username: TheOrangeOne
     link: https://uk.pcpartpicker.com/user/TheOrangeOne/
-    icon: fa-desktop
+    icon: fas fa-desktop
 
   codepen:
     name: CodePen
     username: TheOrangeOne
     link: https://codepen.io/TheOrangeOne/
-    icon: fa-codepen
+    icon: fab fa-codepen
 
   npm:
     name: NPM
     username: TheOrangeOne
     link: https://www.npmjs.com/~TheOrangeOne/
-    icon: fa-file-code-o
+    icon: fab fa-npm
 
   keybase:
     name: Keybase
     username: RealOrangeOne
     link: https://keybase.io/realorangeone
-    icon: fa-key
+    icon: fas fa-key
 
 footer_accounts:
   - github

layouts/_default/single.html

@@ -7,10 +7,10 @@
     <div class="container mt-3 text-center">
       <small>Share this page</small>
       <h3>
-        <a href="https://twitter.com/intent/tweet?text={{ .Permalink }}"><i class="mx-1 fa fa-twitter" aria-hidden="true"></i></a>
+        <a href="https://twitter.com/intent/tweet?text={{ .Permalink }}"><i class="mx-1 fab fa-twitter" aria-hidden="true"></i></a>
-        <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}"><i class="mx-1 fa fa-facebook" aria-hidden="true"></i></a>
+        <a href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}"><i class="mx-1 fab fa-facebook" aria-hidden="true"></i></a>
-        <a href="http://www.reddit.com/submit?url={{ .Permalink }}"><i class="mx-1 fa fa-reddit" aria-hidden="true"></i></a>
+        <a href="http://www.reddit.com/submit?url={{ .Permalink }}"><i class="mx-1 fab fa-reddit" aria-hidden="true"></i></a>
-        <a href="#" data-clipboard-text="Because you can doesn't mean you should — clipboard.js" title="Copy link to clipboard"><i class="mx-1 fa fa-link" aria-hidden="true"></i></a>
+        <a href="#" data-clipboard-text="Because you can doesn't mean you should — clipboard.js" title="Copy link to clipboard"><i class="mx-1 fas fa-copy" aria-hidden="true"></i></a>
       </h3>
     </div>
   {{ end }}

layouts/partials/footer.html

@@ -11,7 +11,7 @@
         <h3 class="text-right">
           {{ range .Site.Data.social.footer_accounts }}
           {{ $account := index $.Site.Data.social.accounts . }}
-          <a href="{{ $account.link }}"><i class="mx-1 fa {{ $account.icon }}" aria-hidden="true" title="{{ $account.name }}"></i></a>
+          <a href="{{ $account.link }}"><i class="mx-1 {{ $account.icon }}" aria-hidden="true" title="{{ $account.name }}"></i></a>
           {{ end }}
         </h3>
       </div>

layouts/partials/navbar.html

@@ -14,7 +14,7 @@
         {{ $account := index $.Site.Data.social.accounts . }}
         <li class="nav-item">
           <a class="nav-link" href="{{ $account.link }}">
-            <i class="fa {{ $account.icon }}" title="{{ $account.name }}"></i>
+            <i class="{{ $account.icon }}" title="{{ $account.name }}"></i>
           </a>
         </li>
         {{ end }}

layouts/shortcodes/pcpartpicker.html

@@ -1,6 +1,6 @@
 <p>
   <a class="" href="https://uk.pcpartpicker.com/user/TheOrangeOne/saved/#view={{ .Get 0 }}">
-    <i class="fa fa-desktop"></i>
+    <i class="fas fa-desktop"></i>
     View on PCPartPicker
   </a>
 </p>

layouts/shortcodes/repobutton.html

@@ -1,5 +1,5 @@
 {{ $repo := default (.Get 0) .Page.Params.repo }}
 
 <a class="btn btn-outline-dark my-2" href="https://github.com/{{ $repo }}">
-  <i class="fa fa-github"></i> View on GitHub
+  <i class="fab fa-github"></i> View on GitHub
 </a>

layouts/shortcodes/social_list.html

@@ -2,7 +2,7 @@
   {{ range $i, $e := sort .Site.Data.social.accounts "name" }}
     <div class="col-sm-3 mt-3">
       <div class="card text-center">
-        <h1 class="display-3"><i class="fa {{ $e.icon }}"></i></h1>
+        <h1 class="display-3"><i class="{{ $e.icon }}"></i></h1>
         <div class="card-body">
           <h3>{{ $e.name }}</h3>
           <a href="{{ $e.link }}">

package.json

@@ -18,9 +18,12 @@
     "yaml-lint": "1.0.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "1.1.0",
+    "@fortawesome/fontawesome-free-brands": "5.0.2",
+    "@fortawesome/fontawesome-free-regular": "5.0.2",
+    "@fortawesome/fontawesome-free-solid": "5.0.2",
     "bootstrap": "4.0.0-beta.2",
     "clipboard": "1.7.1",
-    "font-awesome": "4.7.0",
     "jquery": "3.2.1",
     "lg-thumbnail": "1.1.0",
     "lightgallery": "1.6.4",

static/src/js/fa.js

@@ -0,0 +1,12 @@
+var fontawesome = require('@fortawesome/fontawesome');
+var solid = require('@fortawesome/fontawesome-free-solid');
+var regular = require('@fortawesome/fontawesome-free-regular');
+var brands = require('@fortawesome/fontawesome-free-brands');
+
+try {
+  fontawesome.library.add(solid);
+  fontawesome.library.add(regular);
+  fontawesome.library.add(brands);
+} catch (e) {
+  // Sometimes loading icons raises an exception, even when there's no invalid icons on the screen
+}

static/src/js/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 require('./jquery-global');
+require('./fa');
 require('bootstrap');
 
 
@@ -55,7 +56,7 @@ $('.navbar-brand').on('click', function (event) {
 var clipboard = new Clipboard('a');
 clipboard.on('success', function (e) {
   var ele = $(e.trigger);
-  ele.find('i').attr('class', 'fa fa-check');
+  ele.find('i').attr('class', 'fas fa-check');
   ele.attr('title', 'Copied!');
 });
 

static/src/scss/style.scss

@@ -1,6 +1,3 @@
-$fa-font-path: "../fonts";
-@import "node_modules/font-awesome/scss/font-awesome";
-
 @import "variables";
 
 @import "highlight";  // Generated by Hugo