different icons package

pages/LayoutBase.tsx

@@ -1,19 +1,33 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, StrictMode } from "react";
+import { IconContext } from "react-icons";
+import { FaHome, FaUser } from "react-icons/fa";
 
 import "./style.css";
 
 const Navbar: React.FC = () => (
   <span className="navbar">
-    <a href="/">Home</a>/<a href="/about">About</a>
+    <a href="/">
+      <FaHome />
+      Home
+    </a>
+    <span>/</span>
+    <a href="/about">
+      <FaUser />
+      About
+    </a>
   </span>
 );
 
 const Layout: React.FC<PropsWithChildren> = ({ children }) => (
-  <div className="gridOffset">
-    <Navbar />
-    <hr />
-    {children}
-  </div>
+  <StrictMode>
+    <IconContext.Provider value={{ className: "icon" }}>
+      <div className="gridOffset">
+        <Navbar />
+        <hr style={{ marginTop: "0" }} />
+        {children}
+      </div>
+    </IconContext.Provider>
+  </StrictMode>
 );
 
 export default Layout;

pages/style.css

@@ -113,16 +113,22 @@ a > code:hover {
 
 .navbar {
   text-align: right;
-  margin: 0.5em;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
 }
 
-.navbar * {
-  margin-left: 0.5em;
-  margin-right: 0.5em;
+.navbar :not(.icon) {
+  padding-left: 0.25em;
+  padding-right: 0.25em;
   text-decoration: none;
   border-bottom-style: none;
 }
 
-[class*="fa-"] {
-  margin-right: 0.5em;
+.icon {
+  vertical-align: middle;
+  margin-right: 0.3em;
+}
+
+.icon-post {
+  vertical-align: text-top;
 }