Use fontawesome 5 svg & js framework

_config.yml

@@ -109,9 +109,12 @@ theme_config:
   # Footer area links
   # If you set "icons: false" link names will be clear text
   # If "icons: true" link names will interpreted as fontawesome icon names
-  # Use only the brand icon names (https://fontawesome.com/cheatsheet#brands)
+  # Use link names that correspond to the icon style (solid or brands)
+  # https://fontawesome.com/cheatsheet
   links:
+    solid:
       Home: /
+    brands:
       GitLab: https://gitlab.com/curben/curben.gitlab.io
 
   # nav position (top, left. top is default)

themes/typing/layout/_partial/head.ejs

@@ -40,7 +40,8 @@
 
   <%- css('css/typing') %>
   <% if (theme.icons){ %>
-    <%- css('css/fontawesome.min.css') %>
+    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/solid.js" x-sri-fallback="/fontawesome/solid.min.js" integrity="sha384-GJiigN/ef2B3HMj0haY+eMmG4EIIrhWgGJ2Rv0IaWnNdWdbWPr1sRLkGz7xfjOFw" crossorigin="anonymous"></script>
-    <%- css('css/brands.min.css') %>
+    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/brands.js" x-sri-fallback="/fontawesome/brands.min.js" integrity="sha384-2vdvXGQdnt+ze3ylY5ESeZ9TOxwxlOsldUzQBwtjvRpen1FwDT767SqyVbYrltjb" crossorigin="anonymous"></script>
+    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/fontawesome.js" x-sri-fallback="/fontawesome/fontawesome.min.js" integrity="sha384-2OfHGv4zQZxcNK+oL8TR9pA+ADXtUODqGpIRy1zOgioC4X3+2vbOAp5Qv7uHM4Z8" crossorigin="anonymous"></script>
   <% } %>
 </head>

themes/typing/layout/about.ejs

@@ -10,12 +10,21 @@
   </div>
 </div>
   <ul class="footer-links">
-      <% for (var key in theme.links) { %>
+  <% for (var key in theme.links.solid) { %>
     <li>
       <% if (theme.icons){ %>
-            <a href="<%= theme.links[key] %>"><span class="fa fa-<%= key %>"></span></a>
+      <a href="<%= theme.links.solid[key] %>"><span class="fas fa-<%= key %>"></span></a>
       <% } else { %>
-	    <a href="<%= theme.links[key] %>"><%= key %></a>
+      <a href="<%= theme.links.solid[key] %>"><%= key %></a>
+      <% } %>
+    </li>
+  <% } %>
+  <% for (var key in theme.links.brands) { %>
+    <li>
+      <% if (theme.icons){ %>
+      <a href="<%= theme.links.brands[key] %>"><span class="fab fa-<%= key %>"></span></a>
+      <% } else { %>
+      <a href="<%= theme.links.brands[key] %>"><%= key %></a>
   <% } %>
       </li>
     <% } %>

themes/typing/source/css/brands.min.css

@@ -1,5 +0,0 @@
-/*!
- * Font Awesome Free 5.3.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}