Use google icon in sign in page

We were using the icon for google plus, which was confusing since google
plus no longer exists.

Note this change requires changing the font for these icons, since the
google icon is not present in the "icons" font. On the plus side, using
the font awesome icons we can simplify the code a little bit.

app/assets/stylesheets/layout.scss

@@ -1541,29 +1541,19 @@ table {
 .button.button-wordpress {
   color: $text;
   font-weight: bold;
-  height: $line-height * 2;
-  line-height: $line-height * 2;
-  padding: 0;
-  position: relative;
 
   &::before {
-    font-family: "icons" !important;
     font-size: rem-calc(24);
-    left: 0;
-    line-height: $line-height * 2;
-    padding: 0 rem-calc(20);
-    position: absolute;
-    top: 0;
   }
 }
 
 .button.button-twitter {
+  @include has-fa-icon(twitter, brands);
   background: #ecf7fc;
   border-left: 3px solid #45b0e3;
 
   &::before {
     color: #45b0e3;
-    content: "f";
   }
 }
 
@@ -1604,12 +1594,12 @@ table {
 }
 
 .button.button-facebook {
+  @include has-fa-icon(facebook-f, brands);
   background: #ebeef4;
   border-left: 3px solid #3b5998;
 
   &::before {
     color: #3b5998;
-    content: "A";
   }
 }
 
@@ -1627,22 +1617,22 @@ table {
 }
 
 .button.button-google {
+  @include has-fa-icon(google, brands);
   background: #fcedea;
   border-left: 3px solid #de4c34;
 
   &::before {
     color: #de4c34;
-    content: "B";
   }
 }
 
 .button.button-wordpress {
+  @include has-fa-icon(wordpress, brands);
   background: #dcdde3;
   border-left: 3px solid #2f2f33;
 
   &::before {
     color: #2f2f33;
-    content: "J";
   }
 }
 

app/assets/stylesheets/mixins.scss

@@ -169,10 +169,14 @@
   &::before {
     @extend %font-icon;
 
-    @if $style == "regular" {
-      font-weight: normal;
-    } @else {
+    @if $style == "solid" {
       font-weight: bold;
+    } @else {
+      font-weight: normal;
+    }
+
+    @if $style == "brands" {
+      font-family: "Font Awesome 5 Brands";
     }
   }