Solution 1 :

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!

Solution 2 :

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

  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() {, marker);
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
#map {
  height: 100%;
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="">
<div id="map"></div>

<script async defer src=""></script>

Solution 3 :

Check either you font awesome link <link rel="stylesheet" type="text/css" href=""> is working or not as i can see one ERROR in you console window

Problem :

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

I followed the code on this link here:

But when I test on my site the font awesome icon doesn’t show up like in the example I followed.

enter image description here

Not sure what I am doing wrong….


Comment posted by Raeesh Alam

If you are using

Comment posted by Ten Digit Grid

Yep my link wasn’t there… I had it in my mobile application but not my website, got lost in the code

Comment posted by MT_dev

Ahh, yes! Glad you found the issue!