user3671746 user3671746 - 4 years ago 377
CSS Question

Font-Awesome-Icons with Leaflet-Awesome-Markers not showing

I'm sure it's something simple but I just don't see what I'm doing wrong.
I'm using the Leaflet Awesome Markers plugin. The markers work great, the problem is that the Fontawesome-Icons are not visible. I've done everything step by step as told in the description, the following two lines are in my head-tag.

<link href="//" rel="stylesheet">
<link rel="stylesheet" href="css/leaflet.awesome-markers.css">

these two lines are at the end of my html:

<script src=""></script>
<script src="js/leaflet.awesome-markers.js"></script>

And as told in here is my script:

var restaurantMarker = L.AwesomeMarkers.icon({
icon: 'coffee',
markerColor: 'darkred',
prefix: 'fa',
iconColor: 'black'

L.marker([48.185556, 11.620278], {icon: restaurantMarker}).addTo(map)

As it works here and at least I tried to do everything as it was described, I just don't see the fault....

Furthermore, as you can see in the picture the icon should be in the marker ...

Answer Source

I really can't help you completely since I don't have all the code BUT:

There seems to me that you don not use the right family for your Font-Awesome. If you look at the font-family of your icon it says "locate-fa" and it gets the CSS from locate-fa.css.22.

I tested your code and it worked due to the correct CSS, My fiddle.

    font-family: FontAwesome;    

However if you look at the CSS when you inspect the marker, it correctly says that the CSS is from font-awesome.css and that the font-family is the correct FontAwesome.

Try to find the "locate"-part that interfere with your CSS and it should work!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download