I'd like to use this Fontawesome version with Openlayers 3. I tried changing the font value from FontAwesome to Font Awesome Free, but nothing happens. On the map appears a square (it means that the unicode cannot be found inside the font).

return new ol.style.Style({
  geometry: geom,
  text: new ol.style.Text({
    text: '\uf041',
    font: '20px FontAwesome',
    // font: 'Font Awesome Free',
  • 1
    Did this work for you stackoverflow.com/questions/27809479/… ? Mar 25, 2021 at 14:49
  • Unfortunately no. The strange thing is that it works great with Glyphicons. Instead, the FA icons are loaded throughout the application, except on the map.
    – Koba
    Mar 25, 2021 at 14:52

1 Answer 1


I have worked on something similar recently using FontAwesome Free. Where you have the font property, try this (assuming that you are using the latest free FontAwesome) :

font: '900 20px "Font Awesome 5 Free" '

I went through a similar issue and one thing that I discovered is that for FontAwesome Free to work correctly the font weight should be 900. This was during a proof of concept demo.

In the current production version using the pro version of FontAwesome, we need to wrap double quotes around the font type (ie; "Font Awesome 5 Free") and I assume it is the same with the free version too. Out of curiosity, I just tested what happens when the double quotes are removed and I get the "square" on the map.

Hopefully, these items can help you. Good luck!

  • It worked! Thank you Pkay!
    – Koba
    Apr 13, 2021 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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