font-awesome markers

[FabianHanggi]

Hello

I'd like to use font awesome icons as markers. I'm using arcgis 4.24.5.

i tried to follow this exmaple from @ReneRubalcava  but it is not working

https://community.esri.com/t5/gis-blog/label-markers-for-you-arcgis-javascript-apps/ba-p/894206

i'm seeing  this error in the console

request.js:5 GET https://static.arcgis.com/fonts/fontawesome-regular/61696-61951.pbf 404

Not sure why it's looking for a pbf file on static.arcgis.com

Does anyone have an example for how to use font awesome icons as symbols in a graphic?

Thank you.

Fabian

[BjornSvensson]

That Rene sample is 7 years old with a very different version of the JavaScript API.  It does not apply to recent versions.

For symbolizing points, you have four options: SimpleMarkerSymbol , PictureMarkerSymbol , TextSymbol and CIMSymbol .  

To specify a font for TextSymbol for clientside layers, the fonts supported depends on if you are using SceneView or MapView.  For SceneView, the font needs to be installed on the client machine.  For MapView, supported fonts are hosted on https://static.arcgis.com/fonts.  Based on your error it seems like you are using MapView.  The supported fonts are listed at https://developers.arcgis.com/javascript/latest/labeling/#fonts-for-featurelayer-csvlayer-and-stream...

https://developers.arcgis.com/javascript/latest/labeling/ has more info about font support.

[FabianHanggi]

Hi Bjorn

Thank you for your reply.

Yes I am using Mapview.

Since font awesome is not listed as a supported font I guess there's no way to use it with a TextSymbol?

I have one solution but don't like it very much. I download the svg file from fontawesome web site and put it into my public folder (e.g. mine is called truck-solid.svg) then use it like this this

      const track = new Track({

        view: view,

        graphic: new Graphic({

          symbol: {

            type: "picture-marker",

            size: "12px",

            color: "green",

            url: "truck-solid.svg",

            outline: {

              color: "#efefef",

              width: "1.5px"

            }

          }

        }),

        useHeadingEnabled: false

      });

Any better solutions for using fontawesome would be appreciated.

Thank you

Fabian

[Noah-Sager]

Hi @FabianHanggi, unfortunately, Bjorn is correct and there is not a good way to use font awesome in a 2D MapView. It would work in a 3D SceneView as described in the Labeling guide page.