fix: navbar icons (oras-project#364)

Fixed navbar icons not appearing on the website.

Changes:

* Removed the folder for fontawesome icons
* Installed fontawesome package
* Made changes to custom.css

Signed-off-by: Asmit Malakannawar <[email protected]>

docusaurus.config.js

@@ -34,14 +34,6 @@ const config = {
         locales: ["en"],
     },
 
-    stylesheets: [
-        //Add Font Awesome stylesheets
-        "/fonts/font-awesome/fontawesome.css",
-        "/fonts/font-awesome/solid.css",
-        "/fonts/font-awesome/regular.css",
-        "/fonts/font-awesome/brands.css",
-    ],
-
     presets: [
         [
             "classic",
@@ -131,24 +123,27 @@ const config = {
                     },
                     {
                         to: "https://cloud-native.slack.com/archives/CJ1KHJM5Z",
-                        label: " ",
-                        position: "right",
                         target: "_blank",
-                        className: "fab fa-lg fa-slack",
+                        'aria-label': 'Slack',
+                        className: 'navbar__icon navbar__slack',
+                        position: "right",
+                        html: '<i class="fab fa-sm fa-slack"></i>',
                     },
                     {
-                        to: "https://github.com/oras-project",
-                        label: " ",
-                        position: "right",
+                        href: "https://github.com/oras-project",
                         target: "_blank",
-                        className: "fab fa-lg fa-github",
+                        'aria-label': 'GitHub',
+                        className: 'navbar__icon navbar__github',
+                        position: 'right',
+                        html: '<i class="fab fa-sm fa-github"></i>',
                     },
                     {
-                        to: "https://x.com/orasproject",
-                        label: " ",
-                        position: "right",
+                        href: "https://x.com/orasproject",
                         target: "_blank",
-                        className: "fab fa-lg fa-x-twitter",
+                        'aria-label': 'Twitter',
+                        className: 'navbar__icon navbar__twitter',
+                        position: "right",
+                        html: '<i class="fab fa-sm fa-x-twitter"></i>',
                     },
                 ],
             },

package.json

@@ -21,6 +21,7 @@
         "@docusaurus/theme-common": "^3.4.0",
         "@docusaurus/theme-mermaid": "^3.4.0",
         "@docusaurus/types": "^3.4.0",
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "@mdx-js/react": "^3.0.1",
         "clsx": "^2.1.1",
         "prism-react-renderer": "^2.3.1",

src/css/custom.css

@@ -5,6 +5,8 @@
  */
 
 /* You can override the default Infima variables here. */
+@import "@fortawesome/fontawesome-free/css/all.css";
+
 @font-face {
   font-family: 'Nunito';
   src: url('/fonts/Nunito-VariableFont_wght.ttf');
@@ -118,4 +120,31 @@ a {
 .navbar-sidebar__close svg g,
 .navbar__toggle svg path {
   stroke: #FFFFFF;
+}
+
+.navbar__icon {
+  height: 2rem;
+  width: 2rem;
+}
+
+.navbar__github, .navbar__twitter, .navbar__slack {
+  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 1.4rem;
+  transition: background var(--ifm-transition-fast);
+}
+
+html[data-theme='light'] .navbar__github, .navbar__twitter, .navbar__slack {
+  color: var(--ifm-navbar-link-color);
+}
+
+html[data-theme='dark'] .navbar__github, .navbar__twitter, .navbar__slack {
+  color: var(--ifm-navbar-link-color);
+}
+
+.navbar__github:hover, .navbar__twitter:hover, .navbar__slack:hover {
+  background: var(--ifm-color-primary);
 }