Usa Semantic-UI (o un carattere impressionante) icone come marcatori in OpenLayers3

Question

C'è un modo per utilizzare le icone di Semantic interfaccia utente o FontAwseome come marcatori icone OpenLayers3?

OpenLayers caratterizza il testo funzione di stile che può essere utilizzato come segue:

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

Dopo aver controllato lo stile degli elementi dell'interfaccia utente semantiche, ho scoperto che sta usando "Icone", come font-family e scappai personaggi tra cui scegliere il simbolo (ad esempio "\ f073" per l'icona del calendario); quindi ho provato (con il css del Semantic-UI incluso nella sezione head della mia pagina):

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

Questo semplicemente scrivere "\ F073" come marcatori. Ho cercato di usare "& # xf073", come avrei fatto in HTML, ma questo dimostra lo stesso comportamento (si scrive "& # xf073") Ho anche provato "\ uf073", questo ha mostrato qualche piazza della morte che indica una personaggio sconosciuto

Qualche suggerimento?

Answer 1

È necessario impostare in modo esplicito il tipo di carattere per FontAwesome utilizzando la proprietà font, in questo modo:

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

Ho riscontrato dei problemi durante il funzionamento, anche con la risposta di cui sopra. Il mio problema era che stavo copiando direttamente il contenuto tipicamente assegnato da FontAwesome in un elemento CSS invece del codice completo.

Ad esempio, stavo cercando di visualizzare fa-chevron-down utilizzando il codice \f077. Tuttavia, per far apparire l'icona in OpenLayers, è necessario utilizzare \uf077.

Answer 3

Se si desidera utilizzare nomi canonici di Font icone impressionanti è possibile utilizzare fontawesome pacchetto:

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 esempio:

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