Have you gotten the Font Awesome CDN in the <head> tags of your file as <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">? I don’t know if you have issues with other icons in your website, but without that CDN, you may not be able to get your icons to show up! See Font Awesome’s Troubleshooting Page.
What’s your code so far? Do you have a parent <div class="list-group"> above your anchor tag to match the class attributes of your list-group-item list-group-item-action anchor tag (but this may just be hierarchy issue, not the cause of your Font Awesome icons not showing up)? Still, check out this article by Bootstrap, under “Links and Buttons” header. Play around with it!
You are follow FontAwesome v4.7.0 then you can’t use fab class because of this is belong to FontAwesome v5+. So you just need to replace fab fa-youtube to 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> 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>
Check either you font awesome link <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/fontawesome.min.css"> is working or not as i can see one ERROR in you console window
I am attempting to customize links int a Google Maps info-bubble with Bootstrap and font awesome Icons.
I was able to use a list-group from bootstrap for my links in the info bubble successfully, but when I tried to add a font awesome Icon to the link it just does not show up.
<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> Hiking 42 Miles along Michigan's Lake Superior (Adventure Archive)</a>
I followed the code on this link here: https://fontawesome.com/v4.7.0/examples/
But when I test on my site the font awesome icon doesn’t show up like in the example I followed.
Not sure what I am doing wrong….
Yep my link wasn’t there… I had it in my mobile application but not my website, got lost in the code
