Angular google.maps.InfoWindow 字体真棒

Question

在 Google 地图信息中显示 Font Awesome 5 图标 Window (API)

当在 html 模板中使用时，

FA5 在我的 Angular 应用程序中按预期工作。但是当使用 google.maps.InfoWindow 时，我们在 Angular 之外，我无法使用例如

<fa-icon [icon]="['fas', 'location-arrow']"></fa-icon> 在内容 html string.

我们还希望在运行时之前打包所有内容，因此没有运行时调用 js 或 css FA。

Google 地图信息 window 有一个这样的按钮：

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>，效果很好，但后来我也在 index.html.

中使用了 kit.fontawesome.com/***

我认为我必须在我的 map-component.ts 文件中手动渲染图标，并将其传递给我的 drawInfoWindow 函数？但我不知道从哪里开始。有什么建议吗？

干杯！

Answer 1

导入后

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

我可以在我的信息 window 内容 html 中使用图标功能： icon(faLocationArrow).html

感谢 Yaroslav 管理员！

Angular google.maps.InfoWindow 字体真棒

Angular Font Awesome in google.maps.InfoWindow

angular

typescript

google-maps

google-maps-api-3

angular-fontawesome