Extend Esri Icon Fonts with Fonts Awesome

1505
4
Jump to solution
09-30-2018 06:51 AM
Highlighted
New Contributor II

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

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
Frequent Contributor

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.

View solution in original post

4 Replies
Highlighted
Frequent Contributor

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.

View solution in original post

Highlighted
New Contributor II

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

Reply
0 Kudos
Highlighted
Frequent Contributor

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

Try that!

Highlighted
New Contributor II

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

Reply
0 Kudos