diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index c9f898506..a84677d07 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/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";
   }
 }
 
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 0974541c1..534d0b6c9 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/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";
     }
   }