nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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<SPAN class="punctuation token">:</SPAN>before <SPAN class="punctuation token">{</SPAN>
 content<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e600"</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="punctuation token">.</SPAN>calcite <SPAN class="punctuation token">.</SPAN>esriMeasurement <SPAN class="punctuation token">.</SPAN>areaIcon <SPAN class="punctuation token">{</SPAN>
 visibility<SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

My project is available on JS Bin.

Thank you,

Michelle.

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Michelle,

This works:

&nbsp;&nbsp;&nbsp; <SPAN class="selector token">#dijit_form_ToggleButton_1:before</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e601"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'CalciteWebCoreIcons'</SPAN> <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">#dijit_form_ToggleButton_0:before</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e600"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'CalciteWebCoreIcons'</SPAN> <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">#dijit_form_ToggleButton_2:before</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e602"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'CalciteWebCoreIcons'</SPAN> <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">.calcite .esriMeasurement .areaIcon,
&nbsp;&nbsp;&nbsp; .calcite .esriMeasurement .locationIcon,
&nbsp;&nbsp;&nbsp; .calcite .esriMeasurement .distanceIcon</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

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

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

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<SPAN class="operator token">-</SPAN>face <SPAN class="punctuation token">{</SPAN>
 font<SPAN class="operator token">-</SPAN>family<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'CalciteWebCoreIcons'</SPAN><SPAN class="punctuation token">;</SPAN>
 src<SPAN class="punctuation token">:</SPAN>
 <SPAN class="token function">url</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>'</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fraw.githubusercontent.com%2FEsri%2Farcgis-js-api%2Fmaster%2Fthemes%2Fcalcite%2Ficons%2Ffonts%2FCalciteWebCoreIcons.ttf%3Ferniwi" target="_blank">https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCoreIcons.ttf?erniwi</A><SPAN>'</SPAN></SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="token function">format</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'truetype'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="token function">url</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>'</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fraw.githubusercontent.com%2FEsri%2Farcgis-js-api%2Fmaster%2Fthemes%2Fcalcite%2Ficons%2Ffonts%2FCalciteWebCoreIcons.woff%3Ferniwi" target="_blank">https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCoreIcons.woff?erniwi</A><SPAN>'</SPAN></SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="token function">format</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'woff'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="token function">url</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>'</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fraw.githubusercontent.com%2FEsri%2Farcgis-js-api%2Fmaster%2Fthemes%2Fcalcite%2Ficons%2Ffonts%2FCalciteWebCoreIcons.svg%3Ferniwi%23CalciteWebCoreIcons" target="_blank">https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCoreIcons.svg?erniwi#CalciteWebCoreIcons</A><SPAN>'</SPAN></SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="token function">format</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'svg'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 font<SPAN class="operator token">-</SPAN>weight<SPAN class="punctuation token">:</SPAN> normal<SPAN class="punctuation token">;</SPAN>
 font<SPAN class="operator token">-</SPAN>style<SPAN class="punctuation token">:</SPAN> normal<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>

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

<SPAN class="comment token">/* Better Font Rendering =========== */</SPAN>
 <SPAN class="operator token">-</SPAN>webkit<SPAN class="operator token">-</SPAN>font<SPAN class="operator token">-</SPAN>smoothing<SPAN class="punctuation token">:</SPAN> antialiased<SPAN class="punctuation token">;</SPAN>
 <SPAN class="operator token">-</SPAN>moz<SPAN class="operator token">-</SPAN>osx<SPAN class="operator token">-</SPAN>font<SPAN class="operator token">-</SPAN>smoothing<SPAN class="punctuation token">:</SPAN> grayscale<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I updated the JS Bin here.

Thank you,

Michelle.

RobertScheitlin__GISP

Michelle,

This works:

&nbsp;&nbsp;&nbsp; <SPAN class="selector token">#dijit_form_ToggleButton_1:before</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e601"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'CalciteWebCoreIcons'</SPAN> <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">#dijit_form_ToggleButton_0:before</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e600"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'CalciteWebCoreIcons'</SPAN> <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">#dijit_form_ToggleButton_2:before</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">content</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"\e602"</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'CalciteWebCoreIcons'</SPAN> <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="selector token">.calcite .esriMeasurement .areaIcon,
&nbsp;&nbsp;&nbsp; .calcite .esriMeasurement .locationIcon,
&nbsp;&nbsp;&nbsp; .calcite .esriMeasurement .distanceIcon</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.