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

Question

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. ``` ``` these two lines are at the end of my html: ``` ``` 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://jsf…

Accepted Answer

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!

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

Solution

Problem