Add Font Awesome!

[melroy89]

Font Awesome is free (also for commercial use):
https://fontawesome.com/free

Support Font Awesome out of the box:
mapbox/mapbox-gl-js#3605 (comment)
mapbox/mapbox-gl-styles#241

This makes it possible to use Font-Awesome icons in the text-field. So you can use font awesome icons and scale the image up as much as you want (and the icon keeps sharp)!

Using Font awesome icons also makes it possible to color the icons.

Example using geojson data & Font Awesome + color icon:

map.on('load', function() {
  map.addSource('markers', {
  	type: 'geojson',
  	data: './data/data.geojson'
  });

  map.addLayer({
    'id': 'markers',
    "interactive": true,
    "type": "symbol",
    "source": "markers",
    "layout": {
       'text-line-height': 1, // this is to avoid any padding around the "icon"
       'text-padding': 0,
       'text-anchor': 'center', // center, so when rotating the map, the "icon" stay on the same location
       'text-offset': [0, -0.3], // give it a little offset on y, so when zooming it stay on the right place
       'text-allow-overlap': true,
       'text-ignore-placement': true,
       'text-field': String.fromCharCode("0xF3C5"),
       'icon-optional': true, // since we're not using an icon, only text.
       'text-font': ['Font Awesome 5 Free Solid'],
       'text-size': 35
    },
    "paint": {
      'text-translate-anchor': 'viewport', // up to you to change this -- see the docs
      'text-color': '#67A48E' // whatever you want -- can even be data driven using a `{featureProperty}`,
    }
  });
});