Using Font Awesome Icons and Bootstrap to Enhance Google Maps Info Bubble?

I'm currently working on customizing links within a Google Maps info-bubble using Bootstrap and font awesome Icons.

Successfully integrated a list-group from bootstrap for my links in the info bubble, but running into issues when trying to include a font awesome Icon with the link.

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

Referred to this link for the code implementation.

However, upon testing on my site, the font awesome icon isn't displaying as expected based on the example I followed.

https://i.sstatic.net/mrlvk.jpg

Struggling to figure out what could be going wrong....

htmlcssgoogle-mapsbootstrap-4font-awesome

Answer №1

Did you remember to include the Font Awesome CDN link in the <head> section of your file like this: 

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
? It's essential for displaying icons on your website. Make sure to check Font Awesome's Troubleshooting Page if you're facing any issues.

Can you share your code progress? Ensure that you have a parent <div class="list-group"> wrapping your anchor tag with matching classes like 

list-group-item list-group-item-action
. If not, refer to Bootstrap's documentation under "Links and Buttons" section for guidance. Experiment with different possibilities!

Answer №2

If you are using FontAwesome v4.7.0, you will not be able to utilize the fab class because it is intended for FontAwesome v5+. To resolve this issue, simply replace fab fa-youtube with 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

Verify if your 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 functioning correctly, as there appears to be an ERROR in your console window.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason my dropdown menu is not appearing on hover?

Currently, I am in the process of developing a menu using angularJS and google app script within a dialog box. I have been referring to this sample code for guidance. Instead of pasting all my code here, I can summarize what I have come up with: var a ...

javascripthtmlcssangularjsgoogle-apps-script

How do I prevent a media query written for small screens from also affecting large screens?

@media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){ CSS properties for various screen widths are defined here } ...

cssmedia-queries

unusual behavior observed in addEventListener

I have recently delved into learning about the DOM. I have a project in mind where I want to create a website with buttons that, when clicked, play different drum sounds. As part of my experimentation with JavaScript, I wanted to explore the this keyword. ...

javascripthtmljqueryevent-handling

What is the process of dynamically loading CSS into an HTML document?

In my C# program, I am utilizing a web browser control and setting its HTML property programmatically by loading it from an HTML string variable. While this setup works almost perfectly, I have noticed that it loses the reference to the CSS file. I believe ...

c#javascriptcss

Incorporating a full-page background into a specific view using AngularJS

In order to implement a fullscreen CSS background for a specific view in my app, I attempted adding a class to the body. However, this approach caused the background to persist in the cache and remain visible when switching views. The challenge arises fro ...

javascriptjquerycssangularjs

Ways to identify whether a div is in view and includes an input field

This is a unique question that is not related to the issue of querySelectorAll detecting value in input. Instead of asking whether an input field has a value, I am interested in how to detect if the current visible div contains an input field. This is a n ...

javascripthtml

An easy guide to automatically refreshing a div with a seamless animation

I am working on an HTML page where I want to smoothly refresh a specific div every 60 seconds. What I have in mind is a simple process: fade out the div / refresh the div / fade in the div However, despite reading extensively about jQuery and AJAX for r ...

jqueryhtmlajax

Responsive design for iPad and larger screens - adjusting to different screen sizes

Does anyone know of a CSS code that can effectively target both iPad and desktop devices with a max-width of 768? I attempted the following code, however it seems to only work for desktops: @media only screen and (max-width: 768px) Due to this limitatio ...

cssipadmedia

The touch event doesn't seem to be functioning properly on the div element, but it works perfectly on the window element

I have a dilemma that's been puzzling me lately. I'm trying to append a touchevent to a div, but my current method doesn't seem to be working. Here's what I've tried: $("#superContainer").bind('touchstart', function(even ...

javascriptjqueryhtmlcsstouch

Set the <img> source to link to a PHP webpage

I store all my images in a secure directory inaccessible to normal users. The filenames are generated randomly, so I want to keep the path and names of the files hidden. Currently, my img element looks like this: <img src="get_image.php?id=1"> This ...

phphtmlmysqlimage

Can you provide step-by-step instructions for creating a customized CSS dropdown menu?

Need some help with my code. I have a header that I don't want to change much, but I'd like to add a dropdown menu without using a list. Here's my code: <!-- Navigation Bar --> <div class="navbar"> <div class="button_l"& ...

htmlcssdrop-down-menumenu

Discovering the font-weight attribute in Selenium IDE

Currently, I am working with Selenium IDE and aim to detect when a text element has the 'font-weight:bold' CSS property applied to it using 'verifyAttribute'. The specific CSS locator being used is: css=body.home.es ul#languages li:nt ...

cssdomseleniumcss-selectorsselenium-ide

Is there a way to ensure that the text inside the red div is fully contained within the div, so that when it is expanded, all the text will be displayed properly?

I've been experimenting with creating an interactive function that expands a red box and reveals additional text when the cursor hovers over it, using a vertical linear transition. Unfortunately, I'm facing difficulty in implementing this feature ...

htmlcsscss-transitions

Struggling to make rCarousel function properly due to navigation width and autoscroll issues

I'm having some trouble figuring out what's going wrong with my rCarousel setup. Specifically, I can't seem to get the top part labeled "vrienden van het koksgilde" to work properly. Despite following the instructions on , I'm still no ...

jqueryhtmlcsscarousel

Make sure the inputs in separate table data cells are lined up in

I need help aligning two input fields in separate td elements to be on the same line. The issue I am encountering is that when an input is added to a td, it covers up any text within the td. https://i.stack.imgur.com/c7GiQ.png There are two scenarios: I ...

javascripthtmljquerycss

Align a button to the left or right based on its position within the layout

On the left side, there is dynamic text and on the right side, a button is displayed as shown below: <div class="dynamic-text"> {{ dynamicText }} </div> <div class="some-button"> < ...

htmlcssvue.js

Step-by-step guide on incorporating CSS box-shadow with the .style JavaScript property

I have a JavaScript code snippet that looks like this: document.getElementById("imgA").style.box-shadow = "0 0 5px #999999"; The hyphen in box-shadow is causing an invalid assignment exception to be thrown by the JavaScript engine (specifically in Firefo ...

javascripthtmlcss

CSS - setting the background-image property is not displaying the image

.main_banner { background-image: url("../images/main_banner.png"); width: 100%; height: auto; } <!DOCTYPE html> <html> <heading> <title> ********** </title> <link rel="sty ...

htmlcssbackground-image

Transforming DOM elements into Objects

Here are some values that I have: <input name="Document[0][category]" value="12" type="text"> <input name="Document[0][filename]" value="abca.png" type="text" > I am looking for a way to convert them into an object using JavaScript or jQuer ...

javascriptjqueryhtml

Dynamic background rectangle tilted at a 45-degree angle overlays an image

I have a challenge to create a 45-degree rotated square inside a square container, making sure it is responsive. Here's the code I have come up with so far: <div class="container"> <figure> <img src="https://placekitten.com/500 ...

htmlcssresponsive