Angular google.maps.InfoWindow 字体真棒
Angular Font Awesome in google.maps.InfoWindow
在 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
函数?但我不知道从哪里开始。有什么建议吗?
干杯!
导入后
import { icon } from '@fortawesome/fontawesome-svg-core';
import { faLocationArrow } from '@fortawesome/free-solid-svg-icons';
我可以在我的信息 window 内容 html 中使用图标功能:
icon(faLocationArrow).html
感谢 Yaroslav 管理员!
在 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.
我认为我必须在我的 map-component.ts 文件中手动渲染图标,并将其传递给我的 drawInfoWindow
函数?但我不知道从哪里开始。有什么建议吗?
干杯!
导入后
import { icon } from '@fortawesome/fontawesome-svg-core';
import { faLocationArrow } from '@fortawesome/free-solid-svg-icons';
我可以在我的信息 window 内容 html 中使用图标功能:
icon(faLocationArrow).html
感谢 Yaroslav 管理员!