1

I want to style a feature with fontawesome icons. When I define unicode icon hardly, The style work correctly. But when I want to get unicode from a text field, It dosn't work. See the sample in jsFiddle.

const map = new ol.Map({
    ...
});

const textInput = document.getElementById('textinput');

const vectorSource = new ol.source.Vector();
const vectorLayer = new ol.layer.Vector({
    source: vectorSource,
  style: function(feature, resolution) {
    return new ol.style.Style({
        text: new ol.style.Text({
        text: feature.get('text') + ' => ' + textInput.value,
        font: '20px FontAwesome'
      })
    })
  }
});
map.addLayer(vectorLayer);

const feature = new ol.Feature();
feature.set('text', '\uf0ac')
vectorSource.addFeature(feature);

In generally, I want to save the unicode in db, and then get It and show. How can I use fontawesome with unicode in OpenLayers?

1

I solved the question myself. Use String.fromCharCode(parseInt(UnicodeString, 16)). So the above code can be as follow:

feature.set('text', 'f0ac')

and the Style:

new ol.style.Style({
    text: new ol.style.Text({
    text: String.fromCharCode(parseInt(feature.get('text'), 16)) + ' => ' + 
          String.fromCharCode(parseInt(textInput.value, 16)),
    font: '20px FontAwesome'
 })

Final sample code can be found here.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.