Search code examples
javascriptcssleafletfont-awesome-5

Different font source leaflet-awesome-marker and Leaflet-easy-button

I am using two plugins with my leaflet map: Leaflet.awesome-markers and Leaflet.EasyButton.

I am using local font made with Fontastic for icons of Leaflet.EasyButton by including the css file and using the css class:

<link rel="stylesheet" href="/src/localIcons.css">
<script>
L.easyButton('<div class="icon1"></div>', function(btn, map){
map.setView([-21.12, 55.5], 10);
},'Réunion').addTo(mymap);
</script>

and I want to use font from fontawesome for Leaflet.awesome-markers icons but I can't figure out how to use the two at the same time, the icons of marker doesn't show unless I delete the local css include above.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script>
var colorMarker = L.AwesomeMarkers.icon({
markerColor: black,
prefix: 'fa',
extraClasses: 'fas',
icon: 'times-circle'
});

</script>

It looks like the marker plugin is searching the icon in my local font css instead of using fontawesome.

Here is a screenshot to show you the problem:

Leaflet marker icon

Solution

  • What may happen is that your custom Web Font built with Fontastic (that you reference through your localIcons.css file) overlaps some characters that are normally used by Font Awesome as well.

    Inspecting your localIcons.css file content may provide an explanation:

    • Font Awesome characters are of the form: "\f249"
    • If your custom Webfont use a similar pattern (e.g. "\f000"), then the chance of overlapping is very high.

    An easy workaround would be to use SVG for one of these, instead of the Web Font solution.

    For Font Awesome 5 with Leaflet.awesome-markers, you can easily adapt the plugin to use the JS+SVG solution. Refer to: Using Leaflet.AwesomeMarkers plugin with Font Awesome 5?

    But I guess you may not have so many different custom icons in your custom Webfont, in which case it might be more interesting doing the reverse, i.e. use your custom SVG and the standard Webfont for Font Awesome.

    You should have no trouble inserting an SVG image in Leaflet Easy Button.

    If for some reason you still want to stick with the Webfont approach, you can try other services that will convert your custom icons into a different characters set, e.g. http://fontello.com/ use the pattern \e800.