Using Bootstrap Glyphicons as markers for vector layer in Openlayers3

Question

I want to use the bootstrap glyphicon set as markers for a kml layer in an application using openlayers 3. I have tried the following:

var shopStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            size: [50, 50],
            opacity: 1,
            scale: 0.25,
            src: $('<span class="glyphicon glyphicon-shopping-cart"></span>')
        })
    });

This doesn't work - the layer isn't rendered at all. What is the right way to do it?

Answer 1

Although the dvmac01 concerns, I would like to complete the answer with glyphicons. You can use the folowing Text Style:

var styleIcon = new ol.style.Style({
    text: new ol.style.Text({
        text: '\ue062',
        font : 'normal 18px "Glyphicons Halflings"',
        textBaseline: 'Bottom',
        fill: new ol.style.Fill({
            color: 'blue',
        })                    
    })

Answer 2

I could be a little off-track here but to my knowledge it isn't possible to define an icon this way using glyphicons as the ol.style.icon method is for images. Essentially you're trying to use an icon font which needs a text character (subsequently styled by css). Here's an example that I got working but have shelved for now as I couldn't find a way to allow the user to update them and they didn't seem to show up on mobile devices properly.

var FAstyle = function (feature, resolution) {

    var iconFont = 'font-awesome';
    var iconFontText = '\uf041'; // equates to fa-trash icon
    var iconSize = 24;
    var col = '#F58026';

    var styles = [];

    var styleIcon = new ol.style.Style({
        text: new ol.style.Text({
            font: 'Normal ' + iconSize + 'px ' + iconFont,
            text: iconFontText,
            fill: new ol.style.Fill({ color: col })
        })
    });
    styles.push(styleIcon);

    console.log(feature.get("type"));
    return styles;
    return function (feature, resolution) {
        styles.styleIcon.getText().setText(feature.get("iconCode"));
        return styles;
    };
};

Don't forget to include the relevant css files in the head of your document too ;)

Answer 3

This is the way to do this, you can also set the stroke. Be careful, if you're trying to take the contents code from this site, remember to put the "u" character inside the string, like this: '\e059' -> '\ue059', otherwise it will not work.

var styleIcon = new ol.style.Style({
text: new ol.style.Text({
    text: '\ue059',
    font : 'normal 18px "Glyphicons Halflings"',
    stroke: new ol.style.Stroke({ color: 'black', width: 2 })
    fill: new ol.style.Fill({color: 'yellow'})
    textBaseline: 'Bottom',
    scale: 1              
})

Here is a working jsfiddle