Как добавить значок внутри темного режима переключения ⇐ Html

[Anonymous]

Я хочу положить значок в белый круг, который означает, что такое переключение, но я не могу заставить значок, чтобы появиться в нужном месте, не говоря уже о том, где идет круг. Я пытался использовать Font Awesome значки. /> мой существующий код < /h2>
Если он помогает, это сайт, над которым я работаю.

Код: Выделить всё

/* Toggle Styles */
.toggle-container {
text-align: center;
margin-top: 20px;
margin-bottom: 20px
}

.toggle {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.toggle input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
border-radius: 34px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
transition: 0.4s;
}

input:checked + .slider {
background-color: #2FA28D; /* Color for dark mode background */
}

input:checked + .slider:before {
transform: translateX(26px);
}

< /code>
Я не знаю, важен ли сценарий JavaScript, но вот он: < /p>
const modeToggle = document.getElementById('modeToggle');
const body = document.body;

modeToggle.addEventListener('change', () => {
if (modeToggle.checked) {
body.classList.add('dark-mode');
body.classList.remove('light-mode');
localStorage.setItem('mode', 'dark');
} else {
body.classList.add('light-mode');
body.classList.remove('dark-mode');
localStorage.setItem('mode', 'light');
}
});

// Check localStorage for saved mode preference
const savedMode = localStorage.getItem('mode');
if (savedMode === 'dark') {
body.classList.add('dark-mode');
modeToggle.checked = true;
} else {
body.classList.add('light-mode');
modeToggle.checked = false;
}

Я попытался разместить элемент i внутри переключения, который выглядел так:





< /code>
vs без него: < /p>




< /code>
Я также пытался обновить CSS различными другими способами, которыми у меня нет остатков. Я очень новичок в CSS, поэтому все поможет на данный момент.

Подробнее здесь: https://stackoverflow.com/questions/769 ... ode-toggle