CODEWITHSUNDEEP
jquerycssleafletfont-awesome
user3671746
user3671746

Reputation: 291

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

Upvotes: 3

Views: 8685

Answers (1)

willedanielsson
willedanielsson

Reputation: 1333

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!

Upvotes: 4

Related Questions