Use font awesome in social share icons

Since we've changed the facebook and twitter login icons, it makes sense
to use the same icons in social share links.

Besides, using font-awesome simplifies the code and prevents problems
with screen readers announcing the value of the `content:` CSS property.

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;