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 ?

Melanism

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!

Copilot

This works ! FYI, it works also with Semantic-UI if you specify "Icons" instead of "FontAwesome". Thank you so much ! – Melanism

Glad to help! Yeah, the solution is really for any vector icon font you might want to use. I've been using it myself with Octicons in addition to FontAwesome. – Copilot

From Openlayers 4.4.0 and higher, textBaseline needs to be bottom (lowercase) or it will not work. – Unaccountedfor

Answer 2

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

Terraterrace

Answer 3

Anyone looking to achieve this with Openlayers 6.x and Material Design Icons might find this useful:

const style = new Style({
  text: new Text({
    text: String.fromCodePoint(0xF0470), // the value of the CSS' content property (\ replaced with 0x)
    font: 'normal normal 400 24px "Material Design Icons"'
  }),
})

You find the value for the code point in the CSS class for the icon:

.mdi-satellite::before {
  content: "\F0470"; // becomes String.fromCodePoint(0xF0470)
}

Diacaustic

Answer 4

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.

Hejira

Answer 5

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")
''

Vanbuskirk