topic Re: FontAwesome in SceneView in ArcGIS JavaScript Maps SDK Questions

FontAwesome in SceneView

quooston — Thu, 01 Dec 2022 07:04:39 GMT

It would be good if someone posted a modern working example of using FontAwesome in a SceneView that actually works.

It's so common to use FontAwesome and when we're embedding maps into apps that can use FA it would be very nice to easily know how to place FA icons into a map and also for labels.

Thanks

Re: FontAwesome in SceneView

ArnoFiva — Sat, 03 Dec 2022 10:40:32 GMT

Try this: https://codepen.io/arnofiva/pen/ExRONxX

It's based on the online documentation, showing how to load and use fonts in label:
https://developers.arcgis.com/javascript/latest/labeling/#fonts-for-sceneview

CSS

@font-face { font-family: "FontAwesome"; font-style: normal; font-weight: 400; font-display: auto; src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"); }

JavaScript

labelingInfo = [{ labelPlacement: "above-center", labelExpressionInfo: { expression: `"\uf024 " + $feature.NAME` }, symbol: { type: "label-3d", symbolLayers: [ { type: "text", material: { color: "black" }, font: { family: "FontAwesome, Avenir Next", weight: "bold" }, size: 10 } ]} }];

Re: FontAwesome in SceneView

quooston — Mon, 05 Dec 2022 00:44:09 GMT

Thank you for your response, this is helpful.

Insofar as using a FA icon on the map as an icon (not in a label), I assume this would be done with an IconSymbol3DLayer and an external resource pointing to a hosted SVG?

Re: FontAwesome in SceneView

ArnoFiva — Mon, 05 Dec 2022 11:13:29 GMT

I don't have a running example of that but yes, if you can extract an SVG, IconSymbol3DLayer should be able to render it.