Changing icons dynamically with Font Awesome - I'm attempting to switch between the Font Awesome sun and moon icons dynamically using the JavaScript code below, but it doesn't seem to be functioning as expected.
I am loading Font Awesome from a local directory instead of a repository. I have verified that the fonts are being successfully loaded.
<head>
<style>
body {
padding:10% 3% 10% 3%;
text-align:center;
}
img {
height:140px;
width:140px;
}
h1 {
color: #32a852;
}
.mode {
float:right;
}
.change {
cursor: pointer;
border: 1px solid #555;
border-radius: 40%;
width: 20px;
text-align: center;
padding: 5px;
margin-left: 8px;
}
.dark {
background-color: #222;
color: #e6e6e6;
}
</style>
</head>
<body>
<div class="mode">
Dark mode:
<span class="change">OFF</span>
</div>
<script>
$( ".change" ).on("click", function() {
if( $( "body" ).hasClass( "dark", "fa-solid fa-moon")) {
$( "body" ).removeClass( "dark" );
$( ".change" ).text( "OFF" );
} else {
$( "body" ).addClass( "dark", "fa-solid fa-sun" );
$( ".change" ).text( "ON" );
}
});
</script>
</body>