Use of font awesome in vl-style-text

[francoisandre]

Hi,

I'd like to use and font awesome to style point feature as it usually works fine in a classical javascript method.

My code is like that:

But, on the map, it just displays the text \uf041 instead of the icon. On other part of my application fontAwesome is correctly loaded.

I've searched for the correct syntaxt without founding anything.

If someone has got an idea, I'd be grateful

François

[ghettovoice]

Hi!
vl-style-text has font property where you can set any available font, font size and other text style options. Value format of the font like in CSS https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font.
Example for your case with default FontAwsome stylesheet:

<vl-style-box>
  <vl-style-text font="16px FontAwesome" text="\uf041">
    <vl-style-fill color="#2355af" />
    <vl-style-stroke color="white" />
  </vl-style-text>
</vl-style-box>

[francoisandre]

Hi,

Thank you for your quick answer.
In fact when using a syntax that the one you gave me the rendering is this one:

https://i.imgur.com/tpI1cvP.png

But when I use a computed value for the text :

...
markerIcon : function() {
return '\uf041'
}

In this case this works perfectly:

https://i.imgur.com/FZKmgIH.png

My knowledge of Vue.js is too limited to see exactly the difference but I suppose that using a computed value prevent the unicode character to be interpreted as a string.

Your work is really interesting and it shows me how a real quality vue.js code should look like.

Thanks

François

[ghettovoice]

You are right, it's Vue template compiling issue (https://vuejs.org/v2/guide/components.html#Literal-vs-Dynamic)..
In my example, the text property should be added through Vue bind syntax, then it will be handled as raw js string.

<vl-style-box>
  <vl-style-text font="16px FontAwesome" :text="'\uf041'">
    <vl-style-fill color="#2355af" />
    <vl-style-stroke color="white" />
  </vl-style-text>
</vl-style-box>