Блог

Я пробовал различные уже предложенные решения, но ни одно из них не сработало.

У меня простой стиль

 new Style({
    text: new Text({
        text: 'uf0d1',
        scale: 1.5,
        textBaseline: 'bottom',
        font: '900 20px Font Awesome 5 Free',
        fill: new Fill({ color: '#2196F3' }),
    }),
})
 

И это то, что показано на карте

Вместо значка отображается только поле.

Чтобы добавить, это проект Vue с Nuxt, поэтому шрифт Awesome импортируется через next-fontawesome пакет и используется в проекте с помощью тегов компонентов.

В моем основном файле scss я добавил @import '@fortawesome/fontawesome-free/css/all.css'; и протестировал на базовом промежутке, как это

 <span class="custom-icon"></span>
 

и в css

 .custom-icon::before {
       font-family: "Font Awesome 5 Free";
       font-weight: 900;
       content: "f007";
       color: green;
 }
 

что привело к этому

Таким образом, коды работают нормально, но не на карте.

Если кто-нибудь знает, в чем проблема, я был бы очень благодарен.

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

1. Убедитесь, что @fortawesome/fontawesome-free/css/all.css это импортировано в глобальный CSS
2. Название шрифта должно быть заключено в кавычки, например font: '900 20px "Font Awesome 5 Free"'