Tengo este código que debería cambiar el ícono de fontawsome al hacer clic, pero no funciona, lo probé con una imagen y funcionó, pero cuando uso fontawsome no funciona. Por favor ayuda.
<script> var icon = document.getElementById("icon"); icon.onclick = function(){ document.body.classList.toggle("darkTheme"); if(document.body.classList.contains("darkTheme")){ icon.classList.remove('far fa-moon'); icon.classList.add('fas fa-sun fa-lg'); /*icon.src = "img/sun.png";*/ localStorage.setItem("theme", "dark"); } else{ icon.classList.remove('fas fa-sun fa-lg'); icon.classList.add('far fa-moon'); /*icon.src = "img/moon.png";*/ localStorage.setItem("theme", "light"); } } </script>Tienes que separar las clases por coma , no uses espacio
icon.classList.remove('far', 'fa-moon'); icon.classList.add('fas', 'fa-sun', 'fa-lg');Esto debería funcionar para agregar las clases que necesita al elemento. También es más limpio usar un detector de eventos para mantener separado JS CSS HTML. Y como mencionó @Ali Yaghoby, debe separar cada clase con una coma
const icon = document.getElementById('icon'); icon.addEventListener('click', ()=>{ if(document.body.classList.contains("darkTheme")){ icon.classList.remove('far', 'fa-moon'); icon.classList.add('fas', 'fa-sun', 'fa-lg'); localStorage.setItem("theme", "dark"); } else{ icon.classList.remove('fas', 'fa-sun', 'fa-lg'); icon.classList.add('far', 'fa-moon') localStorage.setItem("theme", "light"); } });