Реализация fontawesome-svg-core и pro-light-svg-icons не отображает значки в IE11. Работает в Chrome и Firefox

РЕЗЮМЕ

Возникли проблемы с отображением значков FontAwesome Pro в IE11 (они отлично работают в Chrome и Firefox). Об ошибках консоли не сообщалось, но проверка DOM показывает, что теги <i> не конвертируются в теги <svg>:

ПРОВЕРКА IE11 DOM

<i class = "fal fa-lg fa-angle-right"></i>

ПРОВЕРКА ХРОМИЧЕСКОГО ДОМА

<svg class = "svg-inline--fa fa-angle-left fa-w-6 fa-lg" aria-hidden = "true" focusable = "false" data-prefix = "fal" data-icon = "angle-left" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 192 512" data-fa-i2svg = ""><path fill = "currentColor" d = "M25.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L64.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L25 264.5c-4.6-4.7-4.6-12.3.1-17z"></path></svg>
<!-- <i class = "fal fa-lg fa-angle-left"></i> Font Awesome fontawesome.com -->

ФАЙЛОВЫЕ ВЫДЕРЖКИ TYPESCRIPT - ИМПОРТ И ИНИЦИАЛИЗАЦИЯ

import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faInfoCircle, faAngleLeft, faAngleRight } from '@fortawesome/pro-light-svg-icons';

...

library.add(faInfoCircle, faAngleLeft, faAngleRight);
dom.watch();

// below is an alternate attempt using i2svg function. Again, doesn't work in IE11, but does in Chrome and Firefox
// (long timeout out of desperation)

// setTimeout( ()=> {
//  fontawesome.dom.i2svg().then(() => {
//    fontawesome.dom.watch();
//  });
// }, 2000);

HTML

Пробовал с <meta http-equiv = "X-UA-Compatible" content = "IE=edge"/> и без него в качестве первого метатега. Никакой разницы.

Мы кодируем значки в HTML следующим образом: <i class = "fal fa-lg fa-angle-left"></i>

ЗАКЛЮЧЕНИЕ

На самом деле хочу реализовать этот метод FontAwesome SVG Core, так как он позволяет нам использовать встряхивание дерева / веб-пакет, позволяет избежать импорта ненужных значков и устраняет необходимость в файлах шрифтов.

Не удалось найти в документации FontAwesome ничего о том, что использование этого метода не поддерживается в IE11. Приветствуется любая помощь / понимание!

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
45
1

Ответы 1

Вы можете проверить это: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

Ссылка - это часто задаваемые вопросы по устранению неполадок для Font Awesome.

Другие вопросы по теме