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
Solved! Go to Solution.
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
}
]}
}];
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
}
]}
}];
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?
I don't have a running example of that but yes, if you can extract an SVG, IconSymbol3DLayer should be able to render it.