Информация о Google Картах Bubble With Font Awesome Icons и bootstrap? - PullRequest
Новая
       18

Информация о Google Картах Bubble With Font Awesome Icons и bootstrap?

0 голосов
/ 18 февраля 2020

Я пытаюсь настроить ссылки в информационном пузыре Google Maps с Bootstrap и шрифтом потрясающих иконок.

Мне удалось успешно использовать список-группу из bootstrap для моих ссылок в информационном пузыре, но когда я попытался добавить в ссылку шрифт «Удивительный значок», он просто не отображается. 

<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>

Я следовал по коду по этой ссылке здесь: https://fontawesome.com/v4.7.0/examples/

Но когда я тестирую на своем сайте, значок шрифта не появляется, как в пример, которому я следовал.

enter image description here

Не уверен, что я делаю неправильно ....

Ответы [ 3 ]

1 голос
/ 20 февраля 2020

Получили ли вы Font Awesome CDN в тегах <head> вашего файла как <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">? Я не знаю, есть ли у вас проблемы с другими значками на вашем веб-сайте, но без этого CDN вы не сможете увидеть свои значки! См. Страницу Font Awesome для устранения неполадок .

Какой у вас код на данный момент? Есть ли у вас родительский тег <div class="list-group"> над тегом привязки для соответствия атрибутам класса вашего тега привязки list-group-item list-group-item-action (но это может быть просто проблемой иерархии, а не причиной того, что значки Font Awesome не отображаются)? Тем не менее, прочитайте эту статью по Bootstrap в разделе "Ссылки и кнопки". Поиграй с этим!

0 голосов
/ 20 февраля 2020

Проверьте, используете ли вы шрифт. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/fontawesome.min.css"> работает или нет, поскольку я вижу одну ОШИБКУ в окне вашей консоли

0 голосов
/ 20 февраля 2020

Вы следуете за FontAwesome v4.7.0, тогда вы не можете использовать fab класс, потому что он принадлежит 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>
...