font-awesome

[optimisticcynic]

Hi I am very new to front end development and just found your tool. So far it has been easy to use and made very useful tools.
I am running into an issue using font-awesome. I am attempting to replace a marker on the map with something from font-awesome by using
https://fontawesome.com/v4.7/icon/map-marker

however on the map I am just seeing literally \f041 appearing on the map rather than the symbol. I feel there is an obvious misunderstanding on my part in how unicode would work in this situation. any help would be appreciated.

[MelihAltintas]

<template>
  <ol-map
    :load-tiles-while-animating="true"
    :load-tiles-while-interacting="true"
    style="height: 800px"
  >
    <ol-view
      ref="view"
      :center="[34, 39.13]"
      :zoom="11"
      projection="EPSG:4326"
    />
    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-vector-layer>
      <ol-source-vector>
        <ol-feature>
          <ol-geom-point :coordinates="[34, 39.13]"></ol-geom-point>
          <ol-style>
            <ol-style-text
              :text="String.fromCodePoint(0xf041)"
              font="900 18px 'Font Awesome 5 Free'"
              textBaseline="bottom"
            >
              <ol-style-fill color="red" />
            </ol-style-text>
          </ol-style>
        </ol-feature>
      </ol-source-vector>
    </ol-vector-layer>
  </ol-map>
</template>

Example: https://codesandbox.io/s/vue3-openlayers-fontawesome-yofz1?file=/src/components/Comp.vue

[optimisticcynic]

Thank you. This solved all my issues. I really appreciate the response.