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="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/leaflet.awesome-markers.css">


these two lines are at the end of my html:

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="js/leaflet.awesome-markers.js"></script>


And as told in https://github.com/lvoogdt/Leaflet.awesome-markers 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)
.bindPopup('Aumeister');


As it works here http://jsfiddle.net/VPzu4/92/ and at least I tried to do everything as it was described, I just don't see the fault....

fontawesome-markers-leaflet
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.

.fa{
    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