topic Re: ESRI Icon Font in ArcGIS JavaScript Maps SDK Questions

ESRI Icon Font

MichelleJean — Fri, 10 Dec 2021 23:03:15 GMT

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.

Re: ESRI Icon Font

RobertScheitlin__GISP — Fri, 10 Dec 2021 23:03:18 GMT

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

Re: ESRI Icon Font

MichelleJean — Fri, 10 Dec 2021 23:03:21 GMT

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/CalciteWebCoreIcons.ttf?erniwi') format('truetype'),
 url('https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCoreIcons.woff?erniwi') format('woff'),
 url('https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCoreIcons.svg?erniwi#CalciteWebCoreIcons') 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.

Re: ESRI Icon Font

RobertScheitlin__GISP — Thu, 20 Apr 2017 13:44:27 GMT

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.

Re: ESRI Icon Font

MichelleJean — Thu, 20 Apr 2017 16:51:44 GMT

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

Re: ESRI Icon Font

BjornSvensson — Tue, 25 Apr 2017 04:44:16 GMT

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