0

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

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

<fa-icon [icon]="['fas', 'location-arrow']"></fa-icon> 在内容 html 字符串中。

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

谷歌地图信息窗口有一个这样的按钮：

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函数？但我不知道从哪里开始。有什么建议吗？

干杯!

4

1 回答 1

1

导入后

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

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

感谢雅罗斯拉夫管理员！

于 2019-09-24T11:05:24.233 回答