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

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!

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
    })
});

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.