diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index fed48e0..bda2eb5 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -26,16 +26,24 @@ pygmentsUseClasses = false
 
 [[menu.main]]
     name = "Blog"
+    pre = "<i class='fa fa-book-open fa-lg'></i>"
     url = "/blog/"
+    weight = 10
 
 [[menu.main]]
     name = "Twitter"
+    pre = "<i class='fab fa-twitter fa-lg'></i>"
     url = "https://twitter.com/username"
+    weight = 20
 
 [[menu.main]]
     name = "GitHub"
+    pre = "<i class='fab fa-github fa-lg'></i>"
     url = "https://github.com/username"
+    weight = 30
 
 [[menu.main]]
     name = "Email"
+    pre = "<i class='fa fa-envelope fa-lg'></i>"
     url = "mailto:username@example.com"
+    weight = 40
diff --git a/layouts/index.html b/layouts/index.html
index 3fefac0..7115ce3 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -21,7 +21,7 @@
         <nav>
           <ul>
             {{ range .Site.Menus.main }}
-            <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+            <li><a href="{{ .URL }}">{{ .Pre }}</a></li>
             {{ end }}
           </ul>
         </nav>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 32fa0f8..b2782c3 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="/css/style.css">
   <link rel="stylesheet" href="/css/markdown.css">
   <link rel="stylesheet" href="/css/syntax-highlight.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 
   <!-- custom css -->
   {{ range .Site.Params.custom_css }}
diff --git a/static/css/style.css b/static/css/style.css
index 9acf19d..8826475 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,148 +1,148 @@
 /* General */
 body {
-    min-height:100vh;
-    margin: 0;
-    padding: 20px;
-    box-sizing:border-box;
-    background-color: #EFEFEF;
-    color: #707070;
-    text-align: center;
-    font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
-    line-height: 1.5;
+  min-height:100vh;
+  margin: 0;
+  padding: 20px;
+  box-sizing:border-box;
+  background-color: #EFEFEF;
+  color: #707070;
+  text-align: center;
+  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
+  line-height: 1.5;
 }
 
 a:link {
-    color: #707070;
+  color: #707070;
 }
 
 a:visited {
-    color: #707070;
+  color: #707070;
 }
 
 a:hover {
-    color: #707070;
+  color: #707070;
 }
 
 a:active {
-    color: #707070;
+  color: #707070;
 }
 
 /* Header */
 header .avatar {
-    position: relative;
-    height: 100px;
+  position: relative;
+  height: 100px;
 }
 
 header .avatar img {
-    position: absolute;
-    width: 100px;
-    margin: 0 auto;
-    left: 0;
-    right: 0;
+  position: absolute;
+  width: 100px;
+  margin: 0 auto;
+  left: 0;
+  right: 0;
 }
 
 header .avatarMask {
-    clip-path: circle(48px at center);
-    -webkit-clip-path: circle(48px at center);
+  clip-path: circle(48px at center);
+  -webkit-clip-path: circle(48px at center);
 }
 
 /* Footer */
 footer {
-    font-size: 12px;
-    box-sizing:border-box;
+  font-size: 12px;
+  box-sizing:border-box;
 }
 
 /* Top page */
 #profileContainer {
-    min-height: calc(100vh - 100px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  min-height: calc(100vh - 100px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 #profile {
-    max-width: 600px;
-    min-width: 300px;
+  max-width: 600px;
+  min-width: 300px;
 }
 
 nav ul {
-    display: flex;
-    justify-content: space-evenly;
-    width: 300px;
-    margin: 20px auto;
-    padding: 0;
-    list-style: none;
+  display: flex;
+  justify-content: space-evenly;
+  width: 300px;
+  margin: 20px auto;
+  padding: 0;
+  list-style: none;
 }
 
 /* Contents List */
 #searchBox {
-    position: relative;
-    width: 300px;
-    height: 30px;
-    margin: 20px auto;
+  position: relative;
+  width: 300px;
+  height: 30px;
+  margin: 20px auto;
 }
 
 #searchBox #searchBoxInput {
-    position: absolute;
-    width: 100%;
-    padding: 0 35px 0 15px;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 15px;
-    outline: 0;
-    font-size: 15px;
-    color: #707070;
-    background-color:#f6f6f6;
-    border: solid 1px #c9c9c9;
-    box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  padding: 0 35px 0 15px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 15px;
+  outline: 0;
+  font-size: 15px;
+  color: #707070;
+  background-color:#f6f6f6;
+  border: solid 1px #c9c9c9;
+  box-sizing: border-box;
 }
 
 #searchBox #searchBoxInput::placeholder {
-    color: #c9c9c9;
+  color: #c9c9c9;
 }
 
 #searchBox #searchBoxIcon {
-    position: absolute;
-    height: 20px;
-    width: 20px;
-    top: 5px;
-    right: 10px;
+  position: absolute;
+  height: 20px;
+  width: 20px;
+  top: 5px;
+  right: 10px;
 }
 
 #searchResults {
-    display: none;
-    position: absolute;
-    max-width: 600px;
-    min-width: 300px;
-    margin: 0 auto;
-    top: 240px;
-    left: 0;
-    right: 0;
-    padding: 5px;
-    background-color:#f6f6f6;
-    border: solid 1px #c9c9c9;
-    border-radius: 5px;
-    text-align: left;
-    box-sizing: border-box;
+  display: none;
+  position: absolute;
+  max-width: 600px;
+  min-width: 300px;
+  margin: 0 auto;
+  top: 240px;
+  left: 0;
+  right: 0;
+  padding: 5px;
+  background-color:#f6f6f6;
+  border: solid 1px #c9c9c9;
+  border-radius: 5px;
+  text-align: left;
+  box-sizing: border-box;
 }
 
 #searchResults .searchResultPage {
-    padding: 20px
+  padding: 20px
 }
 
 #searchResults .searchResultTitle {
-    font-weight: bold;
-    margin: 5px 0;
+  font-weight: bold;
+  margin: 5px 0;
 }
 
 #searchResults .searchResultBody {
-    font-size: 14px;
+  font-size: 14px;
 }
 
 #searchResults mark {
-    background-color: #dddfdf;
+  background-color: #dddfdf;
 }
 
 #contentsList {
@@ -150,17 +150,17 @@ nav ul {
 }
 
 #contentsList hr.separator {
-    width: 10px;
-    margin: 30px auto;
-    border: solid 1px #C9C9C9;
+  width: 10px;
+  margin: 30px auto;
+  border: solid 1px #C9C9C9;
 }
 
 /* Page */
 div.markdown-body {
-    width: 90vw;
-    max-width: 800px;
-    min-width: 300px;
-    margin: 0 auto;
-    padding: 20px;
-    text-align: left;
+  width: 90vw;
+  max-width: 800px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: left;
 }