Extend Esri Icon Fonts with Fonts Awesome

[EssaddekMohammed]

Hello,

I would like to extend Esri Icon Fonts with FontsAwesome icon packs to give End Users the ability to choose markers icons. To achieve that i ve tried this way :

<style>
    @font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
           src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
           src : url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"),
                 url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
                 url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
                 url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
                 url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesome...") format("svg");
}
  </style>

and in JS :

var textSymbol = {
        type: "text", // autocasts as new TextSymbol()
        color: "#7A003C",
        text: "\f5de", // esri-icon-map-pin
        font: { // autocasts as new Font()
          size: 30,
          family: "FontAwesome"
        }
      };

And did not works. Is this possible?

Regards

[ReneRubalcava · Accepted solution]

As far as I know, you need to use the unicode glyph, not just the unicode chars.

Check out this this sample.

Font Markers 

I talked about this here.

https://community.esri.com/people/odoe/blog/2015/01/07/label-markers-for-you-arcgis-javascript-apps 

On the Font Awesome icon page (Font Awesome ), click on the icon near the top to copy the glyph.

[EssaddekMohammed]

Hello, thank you for your answer.

As i marked in my questions, those icons are chosen in the backend by the end users. is there anyway to automate icons fetching ?

Regards

[ReneRubalcava]

ok, after some trial and error and stack overflow digging, it works if you change \f5de to \uf5de

Try that!

[EssaddekMohammed]

Thank you so much for your help. That works for me.