Page MenuHomePhabricator

icons in wikimedia-ui.wmflabs.org don't appear in Firefox
Closed, DeclinedPublic

Description

(I don't know if there's a better Phabricator project forthis.)

In Firefox, no icons appear in the various http://wikimedia-ui.wmflabs.org/ examples. There are no icons in "Add an icon" example, nor the down pointer in "Button + Dropdown":

wikimedia-ui_labs_no_icons_Firefox.png (409×331 px, 21 KB)

In Chromium, the generated HTML is

<wiki-icon icon="caret-down">
  <svg class="icon wikiglyph-caret-down" viewBox="0 0 512 512">
      <path d="m256 427l190-190c-17-17-43-17-60 0l-130 130-130-128c-17-17-43-17-60 0z"></path>
   </svg>
</wiki-icon>

(good!), but in Firefox 42 it's just

<wiki-icon icon="caret-down"></wiki-icon>

with no embedded SVG. Perhaps the missing SVG is why the size of the div for the caret down is smaller than the button to its left.

Event Timeline

Spage assigned this task to violetto.
Spage raised the priority of this task from to Needs Triage.
Spage updated the task description. (Show Details)
Spage added a project: UI-Standardization.
Spage subscribed.

I switched icons to use svg sprite as opposed to a .js file that fetches svg from fontastic.me and have been getting this issue

@violetto What are the reasons behind using fontastic? It seems not a sustainable service to me.

As a prototype. I didn't think it was sustainable either, that's why the switch to svg.