Угловой шрифт Awesome в google.maps.InfoWindow - PullRequest
Новая
       47

Угловой шрифт Awesome в google.maps.InfoWindow

0 голосов
/ 23 сентября 2019

Отображение значка Font Awesome 5 в окне Google Maps Info (API)

FA5 работает должным образом в моем приложении Angular при использовании в шаблонах HTML.Но при использовании google.maps.InfoWindow мы за пределами Angular, и я не могу использовать, например,

<fa-icon [icon]="['fas', 'location-arrow']"></fa-icon> в строке содержимого html.

Мы также хотим, чтобы все было упакованодо времени выполнения, так что никакие вызовы времени выполнения для js или css для FA.

В информационном окне Карт Google есть кнопка, подобная этой: 

drawInfoWindow() {
    this.infowindow = new google.maps.InfoWindow({
        content:
        "<div class='info-window'>"+
        "<button type='button' class='btn btn-vn btn-md btn-default'><div class='fas-wrapper'><fa-icon [icon]=\"['fas', 'location-arrow']\"></fa-icon></div> Navigate</button>"+
        "</div>"
    });
}

Я также добавил "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", в angular.jsonв случае, если это может быть полезным.

Перед обновлением до FA5 я использовал <i class='fas fa-location-arrow'></i>, который работал хорошо, но затем я также использовал kit.fontawesome.com/*** в моем index.html.

Я так понимаю, что мне нужно вручную отобразить значок в моем файле map-component.ts и передать его в мою функцию drawInfoWindow?Но я не знаю, с чего начать.Есть предложения?

Ура!

1 Ответ

1 голос
/ 24 сентября 2019

После импорта 

import { icon } from '@fortawesome/fontawesome-svg-core';
import { faLocationArrow } from '@fortawesome/free-solid-svg-icons';

Я мог бы использовать функцию значка в моем информационном окне html: icon(faLocationArrow).html

Спасибо Yaroslav Admin!

...