Hi all,
apologies for the misleading question, could not think of a better way to frame one !
So I am using openlayers in my oj project. I have markers on a map. I want to give these markers a custom styles, basically same icons with different color. I created an svg icon using adobe illustrator and used https://glyphter.com/ to convert the svg to icon font. So I have a css file with the content :
@font-face {
font-family: 'stop';
src: url('../css/fonts/stop.eot');
src: url('../css/fonts/stop.eot?#iefix') format('embedded-opentype'),
url('../css/fonts/stop.woff') format('woff'),
url('../css/fonts/stop.ttf') format('truetype'),
url('../css/fonts/stop.svg#stop') format('svg');
font-weight: normal;
font-style: normal;
}
[class*='icon-']:before{
display: inline-block;
font-family: 'stop';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-stop:before{content:'\0041';}
.icon-stop_auto:before{content:'\0042';}
.icon-stop_done:before{content:'\0043';}
I copied this code to the app.css file. And I have all the other files in the right place.
Now, in my js code, I have my style as :
var style = new ol.style.Style({
text: new ol.style.Text({
text: "\0041", // for the stop icon
font: 'normal 28px stop',
textBaseline: 'bottom',
fill: new ol.style.Fill({
color: 'red'
})
})
});
But this does not work and I just see something like " 1" instead of my icon, which is just what the code 0041 refers to (I think). I think it doesn't find the refered icon font, but I don't know why.
Would be really great if someone could help me out here !
Regards,
Vikram