add FontAwesome; use logo icons instead of words for socials

package.json

@@ -12,6 +12,10 @@
     "lint:format": "prettier --write src"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sass": "^1.80.6"

src/components/Footer/Footer.tsx

@@ -1,4 +1,7 @@
 import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faInstagram, faLinkedin } from "@fortawesome/free-brands-svg-icons";
+import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 import reactLogo from "../../assets/react.svg";
 import "./Footer.scss";
 
@@ -15,15 +18,17 @@ export const Footer: React.FC<IFooter> = () => {
       <div>
         <div className="footer__flexbox">
           <a href="https://www.instagram.com/wildhacks/" rel="noreferrer">
-            Instagram
+            <FontAwesomeIcon icon={faInstagram} />
           </a>
           <a
             href="https://www.linkedin.com/company/wildhacks/"
             rel="noreferrer"
           >
-            LinkedIn
+            <FontAwesomeIcon icon={faLinkedin} />
+          </a>
+          <a href="mailto:[email protected]">
+            <FontAwesomeIcon icon={faEnvelope} />
           </a>
-          <a href="mailto:[email protected]">Email</a>
         </div>
       </div>
     </div>