Extend Esri Icon Fonts with Fonts Awesome

2336
4
Jump to solution
09-30-2018 06:51 AM
EssaddekMohammed
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

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

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
ReneRubalcava
Frequent Contributor II

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
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

0 Kudos
ReneRubalcava
Frequent Contributor II

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

Try that!

EssaddekMohammed
New Contributor II

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

0 Kudos