Fix button icons

sass/utilities/mixins.sass

@@ -36,39 +36,38 @@
   border-radius: 290486px
   cursor: pointer
   display: inline-block
-  height: 24px
+  font-size: $size-normal
+  height: 1.5em
   outline: none
   position: relative
+  transform: rotate(45deg)
+  transform-origin: center center
   vertical-align: top
-  width: 24px
+  width: 1.5em
   &:before,
   &:after
     background-color: $white
     content: ""
     display: block
-    height: 2px
     left: 50%
-    margin-left: -25%
-    margin-top: -1px
     position: absolute
     top: 50%
-    width: 50%
+    transform: translateX(-50%) translateY(-50%)
   &:before
-    transform: rotate(45deg)
+    height: 2px
+    width: 50%
   &:after
-    transform: rotate(-45deg)
+    height: 50%
+    width: 2px
   &:hover
     background-color: rgba($black, 0.2)
   // Sizes
   &.is-small
-    height: 16px
-    width: 16px
+    font-size: $size-small
   &.is-medium
-    height: 32px
-    width: 32px
+    font-size: $size-medium
   &.is-large
-    height: 40px
-    width: 40px
+    font-size: $size-large
 
 =fa($size, $dimensions)
   display: inline-block