Implement some inline ionicions

_sass/2017/components/back-button.scss

@@ -35,8 +35,13 @@
 
   // Icon
   &::before {
-    @include ion-icon('md-arrow-back');
-    font-size: 24px;
+    content: '';
+    @include ion-md-arrow-back(24px, $base-text);
+  }
+
+  &:hover::before,
+  &:focus::before {
+    @include ion-md-arrow-back(24px, white);
   }
 
   // Icon: smaller on mobile

_sass/2017/components/page-actions.scss

@@ -3,8 +3,7 @@
     height: 32px;
   }
 
-  & > .link.link > a,
-  & > .link.link > a::before {
+  & > .link.link > a {
     display: inline-block;
     height: 32px;
     line-height: 32px;
@@ -62,16 +61,29 @@
     margin-left: 8px;
   }
 
+  & > .facebook > a::before,
+  & > .twitter > a::before,
+  & > .github > a::before {
+    content: '';
+    vertical-align: middle;
+    position: relative;
+    top: -2px;
+  }
+
   & > .facebook > a::before {
-    @include ion-icon('logo-facebook');
+    @include ion-logo-facebook(16px, #334455);
   }
 
   & > .twitter > a::before {
-    @include ion-icon('logo-twitter');
+    @include ion-logo-twitter(16px, #334455);
   }
 
   & > .github > a::before {
-    @include ion-icon('logo-github');
+    @include ion-logo-github(16px, #334455);
+  }
+
+  & > .github > a:hover::before {
+    @include ion-logo-github(16px, white);
   }
 
   & > .link.-button > a {

_sass/2017/style.scss

@@ -1,6 +1,7 @@
 @import './variables';
 @import '../vendor/modularscale/modularscale';
 @import '../vendor/iconfonts/ionicons@3';
+@import '../vendor/ionicons-inline/ionicons';
 @import './utils/carbon-style';
 @import './utils/font-size';
 @import './utils/gutter';