FontAwesome in SceneView

587
3
Jump to solution
11-30-2022 11:04 PM
quooston
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
ArnoFiva
Esri Contributor

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
      }
    ]}
}];

 

Screenshot 2022-12-03 at 11.22.21 AM.png

View solution in original post

0 Kudos
3 Replies
ArnoFiva
Esri Contributor

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
      }
    ]}
}];

 

Screenshot 2022-12-03 at 11.22.21 AM.png

0 Kudos
quooston
New Contributor III

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? 

 

0 Kudos
ArnoFiva
Esri Contributor

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