Fixed link hooks

@@ -241,15 +241,23 @@ a.link-hook {
   position: absolute;
   position: absolute;
   display: inline-block;
   display: inline-block;
   top: $-xs;
   top: $-xs;
-  left: -$-xl+2px;
+  left: -$-l;
+  padding-bottom: 30px;
   font-size: 20px;
   font-size: 20px;
   line-height: 20px;
   line-height: 20px;
   color: #BBB;
   color: #BBB;
   opacity: 0;
   opacity: 0;
+  transform: translate3d(10px, 0, 0);
+  transition: all ease-in-out 240ms;
+  background-color: transparent;
+  &:hover {
+    color: $primary;
+  }
 }
 }
 h1, h2, h3, h4, h5, h6 {
 h1, h2, h3, h4, h5, h6 {
   &:hover a.link-hook {
   &:hover a.link-hook {
     opacity: 1;
     opacity: 1;
+    transform: translate3d(0, 0, 0);
   }
   }
 }
 }
 
 

@@ -74,7 +74,7 @@
             headers.each(function() {
             headers.each(function() {
                 var text = $(this).text().trim();
                 var text = $(this).text().trim();
                 var link = '/link/' + pageId + '#' + encodeURIComponent(text);
                 var link = '/link/' + pageId + '#' + encodeURIComponent(text);
-                var linkHook = $('<a class="link-hook"><i class="fa fa-link"></i></a>')
+                var linkHook = $('<a class="link-hook"><i class="zmdi zmdi-link"></i></a>')
                         .attr({"data-content": link, href: link, target: '_blank'});
                         .attr({"data-content": link, href: link, target: '_blank'});
                 linkHook.click(function(e) {
                 linkHook.click(function(e) {
                     e.preventDefault();
                     e.preventDefault();