Невозможно назвать шрифт удивительным от JS

Question

Я называю шрифт Awesome большим пальцем вверх / вниз с помощью js, но он не работает, я использую версию 5.6.3 шрифта Awesome.

JS

function changered() {
   document.getElementById('iconsred').style.content = "f164"; // forecode
   document.getElementById('iconsred').style.fontFamily = "Font Awesome 5 Free"; // fontfamily
}

в этом коде я ужевызов большого пальца вниз, но я хочу изменить его по щелчку и показать заполненную кнопку большого пальца вниз

HTML

<i id="iconsred" class="far fa-thumbs-down fa-5x right"></i>

Я видел, как кто-то задавал тот же вопрос о переполнении стека, но я не могне могу решить мою проблему из их ответа

Answer 1

Лучший способ изменить значок с js - изменить его classList.

document.getElementById('iconsred').classList.add('fa-icon-name-here');

Также

document.getElementById('iconsred').classList.remove('fa-old-icon-you-dont-want-anymore-here');

Answer 2

content можно использовать только для псевдоэлементов ::before и ::after (которые FontAwesome использует для отображения значков).

К сожалению, эти псевдоэлементы не являются частью DOM , следовательно, к ним нельзя получить доступ с помощью Javascript.

Вместо этого добавьте прослушиватель событий, который изменяет класс CSS при нажатии:

iconsred.addEventListener('click', function(event) {
  event.target.classList.toggle('far');
  event.target.classList.toggle('fas');
})

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>

<i id="iconsred" class="far fa-thumbs-down"></i>