From 7ce61ced85f471b969aca5f76dbedaad0c50263f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 14 Feb 2021 14:46:27 +0100
Subject: [PATCH] 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 | 30 +++++++-----------------------
 1 file changed, 7 insertions(+), 23 deletions(-)

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;