Added icons to the navbar (#590)

Rakesh9100 · Feb 16, 2024 · 977e882 · 977e882
1 parent 58abde8
commit 977e882
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 20 deletions.
diff --git a/assets/contact/contact.html b/assets/contact/contact.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" type="text/css" href="./contact.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
     <script src="../../script.js"></script>
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>CalcDiverse | Contact Us</title>
 </head>
 
@@ -33,19 +34,19 @@
 
             <ul class="nav-menu">
                 <li class="nav-item">
-                    <a href="../../index.html" class="nav-link">Home</a>
+                    <a href="../../index.html" class="nav-link"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
                 </li>
                 <li class="nav-item">
-                    <a href="../../index.html#calculators" class="nav-link">Calculators</a>
+                    <a href="../../index.html#calculators" class="nav-link"><i class="fa fa-calculator" aria-hidden="true"></i> Calculators</a>
                 </li>
                 <li class="nav-item">
-                    <a href="../contributors/contributor.html" class="nav-link">Contributors</a>
+                    <a href="../contributors/contributor.html" class="nav-link"><i class="fa fa-users" aria-hidden="true"></i> Contributors</a>
                 </li>
                 <li class="nav-item">
-                    <a href="../faq/faq.html" class="nav-link">FAQ</a>
+                    <a href="../faq/faq.html" class="nav-link"><i class="fa fa-question-circle" aria-hidden="true"></i> FAQ</a>
                 </li>
                 <li>
-                    <a href="#" class="nav-link">Contact</a>
+                    <a href="#" class="nav-link"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a>
                 </li>
             </ul>
             <div class="hamburger">

diff --git a/assets/contributors/contributor.html b/assets/contributors/contributor.html
@@ -9,6 +9,8 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" type="text/css" href="./contributor.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
+
     <title>CalcDiverse | Contributors</title>
 </head>
 
@@ -32,19 +34,19 @@
 
             <ul class="nav-menu">
                 <li class="nav-item">
-                    <a href="../../index.html" class="nav-link">Home</a>
+                    <a href="../../index.html" class="nav-link"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
                 </li>
                 <li class="nav-item">
-                    <a href="../../index.html#calculators" class="nav-link">Calculators</a>
+                    <a href="../../index.html#calculators" class="nav-link"><i class="fa fa-calculator" aria-hidden="true"></i> Calculators</a>
                 </li>
                 <li class="nav-item">
-                    <a href="./contributor.html" class="nav-link">Contributors</a>
+                    <a href="./contributor.html" class="nav-link"><i class="fa fa-users" aria-hidden="true"></i> Contributors</a>
                 </li>
                 <li class="nav-item">
-                    <a href="../faq/faq.html" class="nav-link">FAQ</a>
+                    <a href="../faq/faq.html" class="nav-link"><i class="fa fa-question-circle" aria-hidden="true"></i> FAQ</a>
                 </li>
                 <li>
-                    <a href="../contact/contact.html" class="nav-link">Contact</a>
+                    <a href="../contact/contact.html" class="nav-link"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a>
                 </li>
             </ul>
             <div class="hamburger">

diff --git a/assets/faq/faq.html b/assets/faq/faq.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../../style.css" />
     <link rel="stylesheet" type="text/css" href="./faq.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>FAQ | CalcDiverse</title>
 </head>
 
@@ -33,19 +34,19 @@
 
             <ul class="nav-menu">
                 <li class="nav-item">
-                    <a href="../../index.html" class="nav-link">Home</a>
+                    <a href="../../index.html" class="nav-link"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
                 </li>
                 <li class="nav-item">
-                    <a href="../../index.html#calculators" class="nav-link">Calculators</a>
+                    <a href="../../index.html#calculators" class="nav-link"><i class="fa fa-calculator" aria-hidden="true"></i> Calculators</a>
                 </li>
                 <li class="nav-item">
-                    <a href="../contributors/contributor.html" class="nav-link">Contributors</a>
+                    <a href="../contributors/contributor.html" class="nav-link"><i class="fa fa-users" aria-hidden="true"></i> Contributors</a>
                 </li>
                 <li class="nav-item">
-                    <a href="./faq.html" class="nav-link">FAQ</a>
+                    <a href="./faq.html" class="nav-link"><i class="fa fa-question-circle" aria-hidden="true"></i> FAQ</a>
                 </li>
                 <li class="nav-item">
-                    <a href="../contact/contact.html" class="nav-link">Contact</a>
+                    <a href="../contact/contact.html" class="nav-link"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a>
                 </li>
 
             </ul>

diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <link rel="icon" href="./assets/images/favicon.png" type="image/x-icon">
     <link rel="stylesheet" type="text/css" href="./style.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>CalcDiverse</title>
 </head>
 
@@ -32,19 +33,19 @@
 
             <ul class="nav-menu">
                 <li class="nav-item">
-                    <a href="#home" class="nav-link">Home</a>
+                    <a href="#home" class="nav-link"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
                 </li>
                 <li class="nav-item">
-                    <a href="#calculators" class="nav-link">Calculators</a>
+                    <a href="#calculators" class="nav-link"><i class="fa fa-calculator" aria-hidden="true"></i> Calculators</a>
                 </li>
                 <li class="nav-item">
-                    <a href="./assets/contributors/contributor.html" class="nav-link">Contributors</a>
+                    <a href="./assets/contributors/contributor.html" class="nav-link"><i class="fa fa-users" aria-hidden="true"></i> Contributors</a>
                 </li>
                 <li class="nav-item">
-                    <a href="./assets/faq/faq.html" class="nav-link">FAQ</a>
+                    <a href="./assets/faq/faq.html" class="nav-link"><i class="fa fa-question-circle" aria-hidden="true"></i> FAQ</a>
                 </li>
                 <li class="nav-item">
-                    <a href="./assets/contact/contact.html" class="nav-link">Contact</a>
+                    <a href="./assets/contact/contact.html" class="nav-link"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a>
                 </li>
 
             </ul>