Using Leaflet.AwesomeMarkers plugin with Font Awesome 5? - leaflet

Question

How do I upgrade to Font Awesome 5 for the leaflet plugin Leaflet.awesome-markers? This plugin has not been updated on github for some time and uses font awesome v4.
This is for an app that uses mapbox, leaflet and leaflet awesome markers with font awesome v4 and works correctly.
I've tried to upgrade to Font Awesome 5 like so:
app.scss
#import url('webfonts/font-awesome-pro-5.0.1.css');
#import url('webfonts/fa-solid-900.ttf');
#import url('webfonts/fa-solid-900.woff');
#import url('webfonts/fa-solid-900.woff2');
#import url('webfonts/fa-regular-400.ttf');
#import url('webfonts/fa-regular-400.woff');
#import url('webfonts/fa-regular-400.woff2');
And index.html:
<script src="scripts/fontawesome-all-5.0.1.min.js"></script>
After upgrading to Font Awesome 5, the leaflet markers are displaying with the icons too small, and not in the center of the marker. They were correct with v4.
I found this possible fix, but it made no difference, the icons are still too small and not centered: https://gist.github.com/pikesley/0197f9ea8aff737e6b80c945f741d584
var marker = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: 'music'
});
How can I fix this for Font Awesome 5?

Answer 1

As suggested by #mwilkerson's answer, your current code mixes the JS and Webfonts CSS approaches of Font Awesome 5. Only one approach is necessary.
Webfonts CSS:
The Webfonts Font Awesome 5 approach seems to work fine with the (no longer maintained) plugin
lvoogdt/Leaflet.awesome-markers version 2.0.2:
(here using the 'arrow-alt-circle-down' icon to show that it is correctly centered, because the 'music' one is very asymmetric)
var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);
var marker = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: 'arrow-alt-circle-down' //'music'
});
L.marker(paris, {
icon: marker,
}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.css" />
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div id="map" style="height: 180px"></div>
JS approach:
The JS Font Awesome 5 approach dynamically replaces the <i> element by an <svg>, therefore it is no longer styled by the plugin CSS.
You can easily restore this styling by duplicating the CSS rule:
.awesome-marker svg {
color: #333;
margin-top: 10px;
display: inline-block;
font-size: 14px;
}
var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);
var marker = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: 'arrow-alt-circle-down' //'music'
});
L.marker(paris, {
icon: marker,
}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
.awesome-marker svg {
color: #333;
margin-top: 10px;
display: inline-block;
font-size: 14px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.css" />
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<div id="map" style="height: 180px"></div>

Answer 2

The first step I'd take in resolving this is to determine whether you need to be using the Webfonts with CSS method for Font Awesome 5, or the SVG with JavaScript method, and then focus on that one, removing the other.
In your example code, you are loading both: Webfonts in your app.scss and SVG/JS in your index.html with the <script> block.
Perhaps resolving that set up issue will solve the whole problem. Or at least, it will help clear things up to identify and troubleshoot any remaining issue.
I would recommend starting with the Webfonts approach, to see if you can get that working. If so, then just remove that <script> block from index.html.
However, there are several common issues around upgrading from v4 to v5 (see notes on upgrading here). One of those issues has to do with the names of some icons changing between these major versions (the linked upgrade doc lists the specific icon names that have changed). There is a v4 shim that can ease the upgrade process by automatically translating any v4-only icon names to their v5 counterparts. But this v4 shim only works with the SVG with JavaScript method (details on that same linked upgrade doc). So if you need to use that v4 shim, then you'll need focus on the SVG with JavaScript method and drop the webfont loading in your app.scss.

Answer 3

steps to implement awesome icons into the map:
add this link to the index.html file(root file) if the app
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.css"/>
add this variable
var marker = leaflet.AwesomeMarkers.icon({
icon: 'arrow-alt-circle-down', //'music'
markerColor: 'blue',
prefix: ' fa fa-fa fa-paint-brush',
});
List item
attach the icon to the marker
leaflet.marker([property.lat, property.long], {
icon: marker
})