Use Semantic-UI (or Font Awesome) icons as markers in OpenLayers3

Question

Is there a way to use icons from Semantic UI or FontAwseome as markers icons in OpenLayers3 ?

OpenLayers features the feature style Text that can be used as follows:

var blackFill   = new ol.style.Fill({color: 'black'})
var whiteStroke = new ol.style.Stroke({color: 'white', width: 1})
var iconText    = new ol.style.Text({font: "<my font>", text: "<some string>", fill: blackFill, stroke: whiteStroke })
var featureStyle = new ol.style.Style({ text: iconText });

After checking the style of Semantic UI elements, I discovered it is using "Icons" as font-family and escaped characters to choose the symbol (e.g. "\f073" for the calendar icon); therefore I tried (with Semantic-UI's css included in the head section of my page):

var iconText    = new ol.style.Text({font: "Icons", text: "\f073", fill: blackFill, stroke: whiteStroke })

This merely write "\f073" as markers. I tried to use "&#xf073", as I would do in HTML, but this shows the same behavior (it writes "&#xf073") I also tried "\uf073", this showed some square of death indicating an unknown character.

Any suggestion ?

Answer 1

You need to explicitly set the font to FontAwesome using the font property, like so:

var style = new ol.style.Style({
  text: new ol.style.Text({
    text: '\uf041',
    font: 'normal 18px FontAwesome',
    textBaseline: 'Bottom',
    fill: new ol.style.Fill({
      color: 'white',
    })
  })
});

Cheers!

Answer 2

I was having trouble getting this working, even with the above answer. My problem was that I was directly copying the content typically assigned by FontAwesome in a CSS element instead of the full code.

For example, I was trying to get fa-chevron-down to appear using the code \f077. However, to get the icon to appear in OpenLayers, you need to use \uf077.

Answer 3

If you want to use canonical names of Font Awesome icons you can use fontawesome package:

var fa = require('fontawesome');
var style = new ol.style.Style({
  text: new ol.style.Text({
    text: fa('map-marker'),
    font: 'normal 18px FontAwesome',
    textBaseline: 'Bottom',
    fill: new ol.style.Fill({
      color: 'white'
    })
  })
});

Node.js example:

$ node
> var fa = require("fontawesome");
> fa("map-marker")
''

Answer 4

I used this code to get it to work with OpenLayers v6.0.1 and Font Awesome 5.11.2:

var style = new ol.style.Style({
    text: new ol.style.Text({
        text: '\uf04b',                         // fa-play, unicode f04b
        font: '900 18px "Font Awesome 5 Free"', // font weight must be 900
    })
});