diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 45631681d..d993372ab 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1561,17 +1561,13 @@ table {
   background-image: none;
   color: #fff;
   height: $icon-width;
-  position: relative;
+  line-height: $icon-width;
+  text-align: center;
   width: $icon-width;
 
   &::before {
-    font-family: "icons";
     font-size: $icon-width / 2;
-    left: 50%;
-    line-height: $icon-width;
-    margin-left: rem-calc(-11);
-    position: absolute;
-    top: 0;
+    margin-right: 0;
   }
 
   &:hover,
@@ -1581,12 +1577,9 @@ table {
 }
 
 .ssb-twitter {
+  @include has-fa-icon(twitter, brands);
   background: #45b0e3;
 
-  &::before {
-    content: "f";
-  }
-
   &:hover,
   &:focus {
     color: #40a2d1;
@@ -1604,12 +1597,9 @@ table {
 }
 
 .ssb-facebook {
+  @include has-fa-icon(facebook-f, brands);
   background: #3b5998;
 
-  &::before {
-    content: "A";
-  }
-
   &:hover,
   &:focus {
     color: #354f88;
@@ -1637,12 +1627,9 @@ table {
 }
 
 .ssb-telegram {
+  @include has-fa-icon(telegram-plane, brands);
   background: #08c;
 
-  &::before {
-    content: "1";
-  }
-
   &:hover,
   &:focus {
     color: #40a2d1;
@@ -1650,12 +1637,9 @@ table {
 }
 
 .ssb-whatsapp_app {
+  @include has-fa-icon(whatsapp, brands);
   background: #43d854;
 
-  &::before {
-    content: "P";
-  }
-
   &:hover,
   &:focus {
     color: #43d854;