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
.