Select to view content in your preferred language

4.9 Locate widget icon doesn't appear in IE11, even if I replace it?

822
3
Jump to solution
11-08-2018 02:29 AM
ShakilChoudhury
Regular Contributor

The icon for the Locate widget does not appear in IE11 and I've replaced it like so:

.esri-icon-locate:before {
  content: "\e949";
}

But it still doesn't appear. Tried on IE11 on multiple PCs but still doesn't appear. Anyone know how to fix this?

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
MikkLauringson
Emerging Contributor

Still broken in 4.10 for IE.

The span inside Locator div should have class='esri-icon esri-icon-locate', but it has only class='esri-icon'.

I solved it with CSS

.esri-locate .esri-icon:before {
    content: "\e630";
}

.esri-locate .esri-icon-loading-indicator:before {
    content: "\e65e";
}

.esri-locate .esri-icon {
    font-family: 'CalciteWebCoreIcons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

View solution in original post

3 Replies
ShakilChoudhury
Regular Contributor

Only way I found to get around it is:

setTimeout(function(){
  locateBtn.domNode.innerHTML = "<span aria-hidden='true' class='esri-icon esri-icon-locate'></span><span class='esri-icon-font-fallback-text'>Find my location</span>";
}, 3000);

0 Kudos
MikkLauringson
Emerging Contributor

Still broken in 4.10 for IE.

The span inside Locator div should have class='esri-icon esri-icon-locate', but it has only class='esri-icon'.

I solved it with CSS

.esri-locate .esri-icon:before {
    content: "\e630";
}

.esri-locate .esri-icon-loading-indicator:before {
    content: "\e65e";
}

.esri-locate .esri-icon {
    font-family: 'CalciteWebCoreIcons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
StefanUseldinger
Frequent Contributor

This bug seems to be fixed with 4.12

0 Kudos