How to use font awesome as an icon in leaflet instead of marker

Question

In this code, I was using data[key].category to indicate related Icon as the marker. but I want to replace it with font-awesome icons to make it light-weight on runtime in some places may load over tens of icons as the markers

var Cofee= Leaflet.icon({
      iconUrl: '/img/Coffee.png',
      shadowUrl: '/img/pale-shadow.png',
      iconSize: [34, 49], 
      shadowSize: [49, 49],
      iconAnchor: [5, 62],
      shadowAnchor: [4, 62],
      popupAnchor: [12, -30]
});
var Store= Leaflet.icon({
      iconUrl: '/img/Store.png',
      shadowUrl: '/img/pale-shadow.png',
      iconSize: [34, 49], 
      shadowSize: [49, 49],
      iconAnchor: [5, 62],
      shadowAnchor: [4, 62],
      popupAnchor: [12, -30]
});
..
..
..

this.Getlatlng(currentlatlng, 9000).then(data => {
    for (var key in data) {
        Leaflet.marker(data[key].location, { icon: data[key].category })      
         .addTo(this.map).bindPopup(''+data[key].caption+'');
          markers.push([data[key].location.lat,data[key].location.lng]);
}

user_4929531 · Answer

You can use font-awesome icons instead of built-in marker icons like this:

const fontAwesomeIcon = L.divIcon({
    html: '',
    iconSize: [20, 20],
    className: 'myDivIcon'
});

L.marker([51.5, -0.09],{ icon:  fontAwesomeIcon}).addTo(map)
    .bindPopup('A pretty CSS3 popup.
 Easily customizable.')

const map = L.map('mapid').setView([51.505, -0.09], 8);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

const fontAwesomeIcon = L.divIcon({
  html: '',
  iconSize: [20, 20],
  className: 'myDivIcon'
});

L.marker([51.5, -0.09], {
    icon: fontAwesomeIcon
  }).addTo(map)
  .bindPopup('A pretty CSS3 popup.
 Easily customizable.')

#mapid {
  height: 100vh;
}

body {
  margin: 0px;
}

.leaflet-popup-close-button {
  display: none;
}

.myDivIcon {
  text-align: center;
  /* Horizontally center the text (icon) */
  line-height: 20px;
  /* Vertically center the text (icon) */
}

user_5730471 · Answer

kboul's answer is a really nice simple solution that worked for me. Furthermore...here is how I then applied the code to the use of geojson point data. In this case, I am using the geojson in an overlay map.

var clinics = L.geoJson(clinicData, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, { icon: fontAwesomeIcon });
  },
});

How to use font awesome as an icon in leaflet instead of marker

2 Answers