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

问题:

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 ?

回答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!

回答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.

回答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:

文章来源: Use Semantic-UI (or Font Awesome) icons as markers in OpenLayers3