Icon Styles

Describe the bug Icon fonts are showing up as squares.

I have tried specifying the @font-face in both the main index.html and in the javascript.

To Reproduce

let styles = []
let feature = new Feature({ geometry: geometry});
...
let iconProperties = {
                text: new Text({
                    text: \uf16a,
                    font: 'normal 25px My-Icon-Font',
                    offsetY: 0,
                    offsetX: 0
                })
            };
            styles.push(new Style(iconProperties));

...

return new VectorLayer({
            source: new VectorSource({
                features: [feature]
            }),
            style: styles
        });

Add the layer to your map. Icon displays as a square.

Expected behavior

A font icon displays.

[fredj]

Hi @fuoridallarete,

I’ve put a small example in https://codesandbox.io/s/font-awesome-text-0ectn (the font is loaded in the index.html page)

[fuoridallarete]

Thanks for your quick answer (and solution) @fredj. It works. I was stupidly missing the css link in the html. xx