Как использовать шрифт Awesome 5: after /: before с SVG Javascript?

Я пытаюсь использовать обычное . thumb - player : после { content : ' f144' ; font - family : 'Font Awesome 5 Pro' ; позиция : абсолютная ; ширина : 10 пикселей ; высота : 10 пикселей ; } с шрифтом awesome pro 5.

<!-- This code comes first -->
<!-- Enable searching for pseudo elements -->
<script>
    FontAwesomeConfig = { searchPseudoElements: true };
</script>
<!-- Load Font Awesome SVG with JS -->
<script defer src="/static/fontawesome/fontawesome-all.js"></script>

Я загрузил его через скрипт: fontawesome-all.min.js

Кажется, он не работает. Будет оценен рабочий пример.

javascript,svg,font-awesome,

0

Ответов: 2


3 принят

Согласно документации Font Awesome , псевдо-элементы CSS отключены по умолчанию, если вы загружаете значки через свой JavaScript.

Поскольку поиск псевдоэлементов требует запросов DOM, которые могут замедлить производительность для тех, кто им не нужен, они по умолчанию отключены.

То, что они предлагают делать, - это настроить Font Awesome config для поиска псевдоэлементов CSS, добавив на свою страницу следующее.

Вопросы для заказа

Убедитесь, что вы настраиваете шрифт Awesome, прежде чем браузер загрузит основную библиотеку.

.thumb-player

Это позволяет JavaScript-файлу искать Pseudo-элементы и соответственно менять значки.


1

Какой тип элемента :after?

Если вы пытаетесь использовать :beforeили <text>расширять элементы SVG, например :after, вам не повезло. :afterи :beforeне поддерживаются в SVG. Это только HTML.

JavaScript, SVG, шрифт-удивительный,
Похожие вопросы