Search code examples
leafletfont-awesome

Font Awesome Icons not sized correctly when used with Leaflet

I have a codepen at https://codepen.io/ericg_off/pen/RwMLEmX which demonstrates the issue.

I am trying to use FontAwesome icons with leaflet, but there appears to be nuances to how the fa css is defined that does not play well with leaflet.

For example, the SVG will not be sized or constrained by the html element that contains it.

What needs to be changed so the icon can be sized and constrained by the L.divIcon that contains it?

HTML

<div id="map"></div>

CSS

#map {
  height: 100vh;
}

.my-icons {
  background-color: rgba(0, 255, 0, 1.0);
}

JS

var map = L.map("map", {
  center: [38, -77],
  zoom: 5
});

// Create a Tile Layer and add it to the map
var tiles = new L.tileLayer(
  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    minZoom: 3,
    maxZoom: 9
  }
).addTo(map);

divIcon = L.divIcon({
  html: '<i class="fab fa-google"></i>',
  className: "my-icons",
  iconSize: [20, 20]
});

const markerLayer = L.layerGroup().addTo(map);
const lineLayer = L.layerGroup().addTo(map);

const from = [38, -77];
const to = [38, -100];

const fromMarker = L.marker(from, {
  icon: divIcon
}).addTo(lineLayer);

const line = L.polyline([from, to], { color: "green", weight: 1 }).addTo(
  markerLayer
);
Solution

  • If you need your FontAwesome icon to grow/shrink according to its parent container, you can use height:100% and a max-with:100% instead of em (font-size related):

    Overriding css

    /* center align svg elements */
.leaflet-marker-icon {
    text-align: center;
}

/* scale icon to parent height - set a max-width to preventoverflows */
.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    width: auto!important; 
    height: 100%!important;
    overflow: visible;
    max-width: 100%; 
}

    Example

    var map = L.map("map", {
  center: [38, -77],
  zoom: 5
});

// Create a Tile Layer and add it to the map
var tiles = new L.tileLayer(
  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    minZoom: 3,
    maxZoom: 9
  }
).addTo(map);

divIcon = L.divIcon({
  html: '<i class="fab fa-google"></i>',
  className: "my-icons",
  iconSize: [20, 32]
});

const markerLayer = L.layerGroup().addTo(map);
const lineLayer = L.layerGroup().addTo(map);

const from = [38, -77];
const to = [38, -100];

const fromMarker = L.marker(from, {
  icon: divIcon
}).addTo(lineLayer);

const line = L.polyline([from, to], { color: "green", weight: 1 }).addTo(
  markerLayer
);
    #map {
  height: 100vh;
}

.my-icons {
  background-color: rgba(0, 255, 0, 1);
}

/* center align svg elements */
.leaflet-marker-icon {
    text-align: center;
}

/* scale icon to parent height - set a max-width to avoid overflows */
.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    width: auto!important; 
    height: 100%!important;
    overflow: visible;
    max-width: 100%; 
}
    <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<script src="https://pro.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>