Add social icons

README.md

@@ -59,16 +59,19 @@ disqusShortname = "yourdiscussshortname" # Enable or disable Disqus.
 # Social links
 [[params.social]]
     name = "Github"
+    icon = "fab fa-github fa-2x"
     weight = 1
     url = "https://github.com/johndoe/"
 [[params.social]]
-    name = "Twitter"
+    name = "Gitlab"
+    icon = "fab fa-gitlab fa-2x"
     weight = 2
-    url = "https://twitter.com/johndoe/"
+    url = "https://gitlab.com/johndoe/"
 [[params.social]]
-    name = "LinkedIn"
+    name = "Twitter"
+    icon = "fab fa-twitter fa-2x"
     weight = 3
-    url = "https://www.linkedin.com/in/johndoe/"
+    url = "https://twitter.com/johndoe/"
 
 # Menu links
 [[menu.main]]

assets/scss/_content.scss

@@ -94,6 +94,9 @@
           @media only screen and (max-device-width : 768px) {
             font-size: 1.4rem;
           }
+          i {
+            font-weight: 400;
+          }
         }
       }
     }

assets/scss/_navigation.scss

@@ -57,6 +57,7 @@
   @media only screen and (max-device-width : 768px) {
     display: block;
     font-size: 2.4rem;
+    font-weight: 400;
     line-height: 6.0rem;
     color: $fg-color;
     cursor: pointer;

exampleSite/config.toml

@@ -30,16 +30,29 @@ disqusShortname = "yourdiscussshortname"
 
 [[params.social]]
     name = "Github"
+    icon = "fab fa-github fa-2x"
     weight = 1
     url = "https://github.com/johndoe/"
 [[params.social]]
-    name = "Twitter"
+    name = "Gitlab"
+    icon = "fab fa-gitlab fa-2x"
     weight = 2
+    url = "https://gitlab.com/johndoe/"
+[[params.social]]
+    name = "Twitter"
+    icon = "fab fa-twitter fa-2x"
+    weight = 3
     url = "https://twitter.com/johndoe/"
 [[params.social]]
     name = "LinkedIn"
-    weight = 3
+    icon = "fab fa-linkedin fa-2x"
+    weight = 4
     url = "https://www.linkedin.com/in/johndoe/"
+[[params.social]]
+    name = "Medium"
+    icon = "fab fa-medium fa-2x"
+    weight = 5
+    url = "https://medium.com/@johndoe"
 
 [[menu.main]]
     name = "Blog"

layouts/_default/baseof.html

@@ -15,7 +15,8 @@
     <link rel="canonical" href="{{ .Permalink }}">
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Mono:400,700">
-    <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" integrity="sha256-oSrCnRYXvHG31SBifqP2PM1uje7SJUyX0nTwO2RJV54=" crossorigin="anonymous" />
 
     {{ if .Site.IsServer }}
       {{ $cssOpts := (dict "targetPath" "css/coder.css" "enableSourceMap" true ) }}

layouts/partials/header.html

@@ -4,7 +4,7 @@
       {{ .Site.Title }}
     </a>
     <input type="checkbox" id="menu-toggle" />
-    <label class="menu-button float-right" for="menu-toggle">&#9776;</label>
+    <label class="menu-button float-right" for="menu-toggle"><i class="fas fa-bars"></i></label>
     <ul class="navigation-list">
       {{ with .Site.Menus.main}}
         {{ range sort . }}

layouts/partials/home.html

@@ -8,8 +8,12 @@
     {{ with .Site.Params.social }}
     <ul>
       {{ range sort .}}
+        {{ if .icon }}
+          <li><a href="{{ .url }}"><i class="{{ .icon }}"></i></a></li>
+        {{ else }}
           <li><a href="{{ .url }}">{{ .name }}</a></li>
         {{ end }}
+      {{ end }}
     </ul>
     {{ end }}
   </div>