Google 带有精美字体图标和 bootstrap 的地图信息气泡？

Question

我正在尝试自定义 links int a Google 地图信息气泡 Bootstrap 和字体很棒的图标。

我能够在信息气泡中为我的 link 成功使用 bootstrap 中的列表组，但是当我尝试向 [=30= 添加字体很棒的图标时] 就是不显示。

<a href="https://www.youtube.com/watch?v=u8iaZF-iFNk" target="_blank" class="list-group-item list-group-item-action"> <i class="fab fa-youtube"></i>&nbsp;Hiking 42 Miles along Michigan's Lake Superior (Adventure Archive)</a>

我在此处遵循此 link 上的代码：https://fontawesome.com/v4.7.0/examples/

但是当我在我的网站上测试时，字体真棒图标并没有像我所遵循的示例那样显示。

不确定我做错了什么....

Answer 1

您是否在文件的 <head> 标签中获得了 Font Awesome CDN 作为 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">？我不知道您网站上的其他图标是否有问题，但如果没有该 CDN，您可能无法让您的图标显示出来！参见 Font Awesome 的 Troubleshooting Page.

到目前为止你的代码是什么？您的锚标记上方是否有 parent <div class="list-group"> 以匹配 list-group-item list-group-item-action 锚标记的 class 属性（但这可能只是层次结构问题，而不是您的原因Font Awesome 图标没有显示）？不过，请查看 Bootstrap 的 this article，在 "Links and Buttons" header 下。玩一玩！

Answer 2

您正在关注 FontAwesome v4.7.0 那么您不能使用 fab class 因为其中属于 FontAwesome v5+。所以你只需要将 fab fa-youtube 替换为 fa fa-youtube.

function initMap() {
  var lakeShore = {lat: 47.7231, lng: 86.9407};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: lakeShore
  });

  var contentString = `<h6>Lake Shore Trail</h6>
   <div class="list-group">
     <a href="https://www.youtube.com/watch?v=u8iaZF-iFNk" target="_blank" class="list-group-item list-group-item-action"><i class="fa fa-youtube"></i>&nbsp; Hiking 42 Miles along Michigan's Lake Superior (Adventure Archive)</a>
   </div>`;

  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    // maxWidth: 320
  });
  var marker = new google.maps.Marker({
    position: lakeShore,
    map: map,
    title: 'Lake Shore Trail'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
</script>

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Answer 3

检查你的字体真棒 link <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/fontawesome.min.css"> 是否正常工作，因为我在你的控制台中看到一个错误 window

Google 带有精美字体图标和 bootstrap 的地图信息气泡？

Google Maps info Bubble With Font Awesome Icons and bootstrap?

html

css

google-maps

font-awesome

bootstrap-4