I have a toggle button for dark/light mode on my site (under construction). I would like to replace the words ‘light on’ and ‘light off’ (3rd line) with two Font Awesome icons (‘fa-solid fa-sun’ and ‘fa-solid fa-moon’ respectively).
function updateButton({ buttonEl, isDark }) {
const ariaCta = isDark ? "Change to light theme" : "Change to dark theme";
const buttonCta = isDark ? "light on" : "light off";
buttonEl.setAttribute("aria-label", ariaCta);
buttonEl.innerText = buttonCta;
}
The icons refuse to show up. (This snippet is part of a larger script to determine or set the dark/light mode. The script in itself works fine.)
I know how to use the FA-icons in html and css context, the library is already loaded on the site through FA’s wp-plugin, and icons show just fine when implemented in html – but I can’t get it to work in this js-script. My knowledge of js is limited, so I’m having a hard time pinpointing the reason.
Is there anyone that perhaps could suggest how to go about this?
Edit:
The question was instantly closed after posting, and a duplicate answer was suggested. I looked at that, and tried inserting the FA tag in the way suggested.
function updateButton({ buttonEl, isDark }) {
const ariaCta = isDark ? "Change to light theme" : "Change to dark theme";
const buttonCta = isDark ? "<i class="fa-solid fa-sun"></i>" : "<i class="fa-solid fa-moon"></i>";
buttonEl.setAttribute("aria-label", ariaCta);
buttonEl.innerText = buttonCta;
}
I had already tried this method before, and does not work, the icons do not show up.
I really would appreciate it if the question would be left open, so that people would actually get a change to answer, and I get a change to react to them. My knowledge on this matter is limited, I tried the ways that I know and that I found during a day of searching, without succes. This is why I turned to this forum, as suggested on the Font Awesome page.