Change Dark Mode toggle button to fontawesome icons

index.css

@@ -97,6 +97,7 @@ body.light-mode nav ul li a:hover {
 }
 
 body.light-mode .dark-mode-toggle {
+    color: #242424;
     background-color: #f1f1f1;
 }
 body.light-mode .dark-mode-toggle:hover {
@@ -141,7 +142,7 @@ footer a {
     text-decoration: none;
 }
 footer a:hover {
-    background-color: rgb(20, 23, 26);
+    background-color: #5865f2;
 }
 body.light-mode footer a {
     background-color: rgb(231, 231, 231);

index.html

@@ -29,7 +29,7 @@
             <a href="#contact">Contact</a>
           </li>
         </ul>
-        <button id="dark-mode-toggle" class="dark-mode-toggle">🌙</button>
+        <button id="dark-mode-toggle" class="dark-mode-toggle"><i class="fa-solid fa-sun"></i></button>
       </nav>
     </header>
 

script.js

@@ -5,7 +5,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     function toggleDarkMode(save){
         const isLightMode = body.classList.toggle("light-mode");
-        darkModeButton.textContent = isLightMode ? "☀️" : "🌙";
+        darkModeButton.innerHTML = isLightMode ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
     
         if (save){
             localStorage.setItem("theme", isLightMode ? "light" : "dark");
@@ -16,7 +16,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const theme = localStorage.getItem("theme");
     if (theme === "light"){
         body.classList.add("light-mode");
-        darkModeButton.textContent = "☀️";
+        darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>';
     }
 
     darkModeButton.addEventListener("click", () => {