This fixes #49 social links

src/components/FooterEnd/FooterEnd.tsx

@@ -1,79 +1,107 @@
 import React from "react";
 import classNames from "classnames";
+import {
+  FaFacebookF,
+  FaTwitter,
+  FaLinkedinIn,
+  FaXing,
+  FaYoutube,
+  FaGithub,
+  FaInstagram,
+} from "react-icons/fa";
 import "./footerend.scss";
-export default function FooterEnd({ modifier }: { modifier?: "in-sidebar" }) {
-  return (
-    <div
-      className={classNames("footer-end", {
-        [`footer-end__${modifier}`]: modifier,
-      })}
-    >
-      <div className="footer-social">
-        <div className="footer-social__label">
-          <p>Follow us:</p>
-        </div>
-        <div className="footer-social__links">
-          <a
-            className="social-links-icon"
-            href="https://www.facebook.com/aoepeople"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-facebook social-icon"></i>
-          </a>
-          <a
-            className="social-links-icon"
-            href="https://twitter.com/aoepeople"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-twitter social-icon"></i>
-          </a>
-          <a
-            className="social-links-icon"
-            href="https://www.linkedin.com/company/aoe"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-linkedin social-icon"></i>
-          </a>
-          <a
-            className="social-links-icon"
-            href="https://www.xing.com/company/aoe"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-xing social-icon"></i>
-          </a>
-          <a
-            className="social-links-icon"
-            href="https://www.youtube.com/user/aoepeople"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-youtube social-icon"></i>
-          </a>
-          <a
-            className="social-links-icon"
-            href="https://github.com/aoepeople"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <i className="socicon-github social-icon"></i>
-          </a>
-        </div>
+
+interface Props {
+  modifier?: "in-sidebar";
+}
+
+const FooterEnd: React.FC<Props> = (modifier) => (
+  <div
+    className={classNames("footer-end", {
+      [`footer-end__${modifier}`]: modifier,
+    })}
+  >
+    <div className="footer-social">
+      <div className="footer-social__label">
+        <p>Follow us:</p>
       </div>
-      <div className="footer-copyright">
-        <p>
-          <a
-            href="https://www.aoe.com/en/imprint.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Legal Information
-          </a>
-        </p>
+      <div className="footer-social__links">
+        <a
+          href="https://www.facebook.com/aoepeople"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaFacebookF className="social-icon" />
+        </a>
+
+        <a
+          href="https://twitter.com/aoepeople"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaTwitter className="social-icon" />
+        </a>
+
+        <a
+          href="https://www.linkedin.com/company/aoe"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaLinkedinIn className="social-icon" />
+        </a>
+
+        <a
+          href="https://www.xing.com/company/aoe"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaXing className="social-icon" />
+        </a>
+
+        <a
+          href="https://www.instagram.com/aoepeople"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaInstagram className="social-icon" />
+        </a>
+
+        <a
+          href="https://www.youtube.com/user/aoepeople"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaYoutube className="social-icon" />
+        </a>
+
+        <a
+          href="https://github.com/aoepeople"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="social-icon-a"
+        >
+          <FaGithub className="social-icon" />
+        </a>
       </div>
     </div>
-  );
-}
+    <div className="footer-copyright">
+      <p>
+        <a
+          href="https://www.aoe.com/en/imprint.html"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Legal Information
+        </a>
+      </p>
+    </div>
+  </div>
+);
+
+export default FooterEnd;

src/styles/components/social-icon.scss

@@ -1,27 +1,16 @@
-.social-icon {
-  font-weight: normal;
-  font-style: normal;
-  font-size: 16px; /* Preferred icon size */
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
+.social-icon-a {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 30px;
+  height: 30px;
+  margin: 0 5px;
   background-color: var(--color-white);
   border-radius: 50%;
-  padding: 7px;
-  margin: 0 5px 0 5px;
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: "liga";
+}
+
+.social-icon {
+  font-size: 16px; /* Preferred icon size */
+  color: var(--color-gray-dark);
 }