Search code examples
javascriptfont-awesome-5openlayers-6

OpenLayers 6 and Font Awesome 5 showing boxes instead of icon

I've tried various already suggested solutions but none worked.

I have a simple style

new Style({
    text: new Text({
        text: '\uf0d1',
        scale: 1.5,
        textBaseline: 'bottom',
        font: '900 20px Font Awesome 5 Free',
        fill: new Fill({ color: '#2196F3' }),
    }),
})

And this is what is showed on the map

enter image description here

Only the box is showed instead of the icon.

To add, this is the Vue project with Nuxt, so the Font Awesome is imported via next-fontawesome package and used across the project via component tags.

In my main scss file I have added @import '@fortawesome/fontawesome-free/css/all.css'; and tested on basic span like this

<span class="custom-icon"></span>

and in css

.custom-icon::before {
       font-family: "Font Awesome 5 Free";
       font-weight: 900;
       content: "\f007";
       color: green;
 }

which resulted in this enter image description here

So the codes are working fine but not on the map.

If anybody knows what is the problem I would be very thankful.

Solution

  • Figured it out if anybody needs it for future reference

    1. Make sure that @fortawesome/fontawesome-free/css/all.css is imported in global CSS
    2. Font name should be quoted like font: '900 20px "Font Awesome 5 Free"'