FontAwesome 5 SVGs with Leaflet.awesome-markers

README.md

I recently started using FontAwesome 5's beautiful SVG icons. However I was unable to get them to work on my Leaflet.js markers using https://github.com/lvoogdt/Leaflet.awesome-markers

After a little poking around in the inspection window, I came up with this:

• You need to give the extraClasses value in your marker definition (fas or fab or whatever, it's on the FontAwesome page for each icon)
• The default layout is not great, but a little CSS fixes it right up. You'll want to constrain it to only these icons though, using some SASS nesting, or it will screw up all the other FA icons on your page

I hope somebody finds this useful

map.js

var marker = L.AwesomeMarkers.icon({
  markerColor: 'blue',
  prefix: 'fa',
  extraClasses: 'fas',
  icon: 'music'
});

map.scss

#map {
  .svg-inline--fa {
    font-size: 1.2em;
    margin-top: 10px;
  }
}

Thank you this was really helpful, and its not stated in the documentation.

this didn't work for me, when I do prefix: fa icon: info-circle and extraClasses: fas it makes the class fas fa fa-info-circle which doesn't work because there is an extra fa

In addition to that you have to adapt leaflet.awesome-markers.js to get rid of the additional 'fa' from:

return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + options.prefix + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";

to (delete options.prefix)

return "<i " + iconColorStyle + "class='" + options.extraClasses + " " + iconClass + " " + iconSpinClass + " " + iconColorClass + "'></i>";