diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index d67cbbc..41a67a6 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -6,6 +6,7 @@
     {{ "<!-- Tumble theme for Hugo: https://github.com/adrianshort/tumble -->" | safeHTML }}
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ relURL "/css/main.css" }}">
+    <script src="https://use.fontawesome.com/8ef49d4a0a.js"></script>
 
     {{- with .Type -}}
       <link rel="stylesheet" href="{{ relURL "/css/" }}{{ . }}.css">
@@ -27,18 +28,11 @@
   </head>
   <body>
     <h1 id="site-title"><a href="{{ relURL "/" }}">{{ .Site.Title }}</a></h1>
-    <ul id="site-social">
-        {{- with .Site.Params.email -}}
-        <li><a href="mailto:{{ . }}">{{ . }}</a></li>
-        {{- end -}}
-        {{- with .Site.Params.twitter -}}
-        <li><a href="https://twitter.com/{{ . }}">Twitter</a></li>
-        {{- end -}}
-        {{- with .Site.Params.medium -}}
-        <li><a href="https://medium.com/@{{ . }}">Medium</a></li>
-        {{- end -}}
-        {{- with .Site.Params.github -}}
-        <li><a href="https://github.com/{{ . }}">GitHub</a></li>
-        {{- end -}}
-        
-    </ul>
+
+    <div id="site-social">
+    {{ range .Site.Params.social}}
+      <a href="{{ .url }}" title="{{ .title }}">
+        <i class="fa {{ .fa_icon }}"></i>
+      </a>
+    {{ end }}
+    </div>
diff --git a/static/css/image.css b/static/css/image.css
index e259150..d8a764c 100644
--- a/static/css/image.css
+++ b/static/css/image.css
@@ -3,6 +3,6 @@ body {
   color: black;
 }
 
-h1#site-title a, h1#site-title a:visited, h1#site-title a:hover {
+h1#site-title a, h1#site-title a:visited, h1#site-title a:hover, .fa {
   color: #eee;
 }
diff --git a/static/css/main.css b/static/css/main.css
index 223a767..a5132e6 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -14,15 +14,8 @@ a:visited {
   color: #777;
 }
 
-ul#site-social {
-  margin: 0;
-}
-
-ul#site-social li {
-  list-style-type: none;
-  display: inline;
-  margin: 0 10px 0 0;
-  color: #fff;
+#site-social {
+  font-size: 1.3rem;
 }
 
 .quote {
@@ -122,7 +115,7 @@ article h1 {
 }
 
 #site-title {
-  margin: 70px 0;
+  margin: 50px 0 15px 0;
 }
 
 #site-title a, #site-title a:visited {
@@ -193,6 +186,11 @@ ul.tag-cloud li a, ul.tag-cloud li a:visited {
   text-decoration: none;
 }
 
+.fa {
+  margin: 0 15px 0 0;
+  color: white;
+}
+
 @media screen and (max-width: 599px) {
     body {
       width: 90%;
diff --git a/static/css/post.css b/static/css/post.css
index 2ea9cd0..e1c3879 100644
--- a/static/css/post.css
+++ b/static/css/post.css
@@ -8,6 +8,6 @@ h1, h2, h3 {
   text-transform: none;
 }
 
-h1#site-title a, h1#site-title a:visited, h1#site-title a:hover {
+h1#site-title a, h1#site-title a:visited, h1#site-title a:hover, .fa {
   color: #ccc;
 }
