Отображение текста вместо значков при попытке изменить внешний вид 2 -й значков с шрифтами с символами материала Google, ⇐ Javascript

[Anonymous]

Попытка изменить аспект 2 значков с шрифтом с Awasome с помощью Sharp Google Material Symbols, добавляя ту же таблицу стилей, он дает мне текст (название записи значка) вместо самого значка. Чтобы быть более точным, один значок отображается правильно, в то время как другой появляется как текст. Что я заметил, так это то, что проблема возникает только тогда, когда оба значка являются острыми.
Введите описание изображения здесь
Что я сделал: сначала я копирую мимо таблиц стилей (как иконки должны смотреть) из материалов Google (для каждого значка) в раздел «Код». Значок: < /p>

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

.material-symbols-**sharp** {
font-variation-settings:
'FILL' 0,
'wght' 200,
'GRAD' 0,
'opsz' 20
}

Это код для значка sharp "shophing_basket":

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

.material-symbols-**sharp** {
font-variation-settings:
'FILL' 0,
'wght' 200,
'GRAD' 0,
'opsz' 24
}

< /code>
После этого я поместил код Javascript в свое пользовательское поле. Мне понравилось: < /p>
для значка "Delete": < /p>
document.querySelectorAll("i.fa.fa-trash-o").forEach(icon => {
icon.replaceWith(Object.assign(document.createElement("span"), {
className: "material-symbols-sharp",
textContent: "delete"
}));
});
< /code>
Для значка "shophing_basket": < /p>
var cartIcon = $(".fa.fa-shopping-bag.fa-fw.icon");
cartIcon.parent().html("shopping_basket")

Результат, который он похож на рисунке, прикрепленном выше, «Удалить». Это правильно отображается, поскольку «shophing_basket» не является.

Подробнее здесь: https://stackoverflow.com/questions/796 ... -awesome-i