ESRI Icon Font

[MichelleJean]

Is there a way to replace the Measurement Widget icons with these beautiful ESRI icons ?

I managed to insert a ESRI icon in my ESRI Calcite Maps panel, but inside the Measurement widget the ESRI icon is not recognized:

#dijit_form_ToggleButton_0:before {
 content: "\e600";
 }
 .calcite .esriMeasurement .areaIcon {
 visibility: hidden;
 }‍‍‍‍‍‍

My project is available on JS Bin.

Thank you, 

Michelle.

[RobertScheitlin__GISP · Accepted solution]

Michelle,

  This works:

    #dijit_form_ToggleButton_1:before{
      content: "\e601";
      font-family: 'CalciteWebCoreIcons' !important;
    }
    #dijit_form_ToggleButton_0:before{
      content: "\e600";
      font-family: 'CalciteWebCoreIcons' !important;
    }
    #dijit_form_ToggleButton_2:before{
      content: "\e602";
      font-family: 'CalciteWebCoreIcons' !important;
    }
    .calcite .esriMeasurement .areaIcon,
    .calcite .esriMeasurement .locationIcon,
    .calcite .esriMeasurement .distanceIcon{
      display: none;
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[MichelleJean]

Hi Robert,

Some icons do not load as they do on the ESRI website:

I added the CSS recommended on the website but they still do not load properly:

@font-face {
 font-family: 'CalciteWebCoreIcons';
 src:
 url('https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCor...') format('truetype'),
 url('https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCor...') format('woff'),
 url('https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCor...') format('svg');
 font-weight: normal;
 font-style: normal;
 }

[class^="esri-icon-"], [class*=" esri-icon-"] {
 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: 'CalciteWebCoreIcons' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

/* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I updated the JS Bin here.

Thank you, 

Michelle.

[RobertScheitlin__GISP]

Michelle,

   When I look at those ttf or svg files using an online viewer 

Glyphr Studio 

What you are seeing in jsbin is correct and what is displayed on the esri website is not.

[MichelleJean]

Thank you Robert,

I sent an email to ESRI tech, I will update here with any info I receive.

Nice little tool this Glyphr Studio 

Michelle

[BjornSvensson]

Hi Michelle Jean‌
Your sample is using the 3x font URLs, while the documentation page is using the 4x API.  It seems like we missed updating the 3x font URLs. For now, you can reference the 4x branch.  See e.g. https://jsbin.com/minaxis/edit?html,output