Icon standardisation

The purpose of this page is to document current methods for styling icons across MediaWiki extensions.

Overview
Flow uses a local copy of WikiFont for most of its icons.

It has some implicit icons with no text: [···] for drop-down, v for its sort menu, but most are [glyph] Action name.

Example
To render a lock icon, but with backup text for screen readers and older/incompatible browsers (text does not render in modern browsers; just the icon): Lock

Browser support
Icons: IE9+, FF3.5+, Chrome, Safari 3.2+. (IE8 support can be added with an uglier CSS hack, if applied to the patch linked below.)

Backup text: all browsers, screen readers.

Code
icons.less (backup text support is in a patch)

Overview
We generally use background images, with SVG and PNG fallback. We are fine with using WikiFont for permanent features.

However, we want the ability to use SVG/PNG (or a similar low-friction method) for experimentation, so not every experiment needs to go through the full WikiFont workflow.

This workflow is:


 * Regenerate the output font files (which currently is not scripted)
 * Commit the updated/added source file, and updated generated files to the WikiFont repository (getting code review for this)
 * Commit the built version of WikiFont to core (getting code review for that)
 * If a Growth extension needs the icon before the normal train deployment, cherry-pick the core commit to a core deployment branch

Then (in the event we decide not to make it a permanent feature) remove the icon, doing the whole thing (except the cherry-pick) in reverse.

Browser support
As with MobileFrontend, we rely on having a correctly sized fallback PNG for those browsers that don't support SVG and the `background-size` property.

Overview

 * In mobile we use SVGs and fallback pngs with background-size
 * All our classes are top level without nesting. This is an OOCSS approach.
 * In mobile we use a generic icon class which defaults to 24px width and height and is designed to hide any text inside the element the class is associated with
 * We use modifiers to tweak an icon.
 * Modifiers define the icon image e.g. icon-settings.
 * Modifiers can change the icon size. e.g. icon-32px would set the icon to use a background size of 32px
 * Modifiers can make the icon appear to the left of the text by using the icon-text class

Example
See output of this example on MobileMenu

Browser support

 * The only browsers that experience problems with our method are browser which do not support `background-size`. These also correspond with browsers that do not support SVG. To get around this we ensure the fallback PNG has the same dimensions as the situation where it used. For example if an element has the class "icon-unicorn icon icon-64px" the fallback png would (or should) be 64px by 64px.

Code
Our icons less file documents usage in MobileFrontend.

Overview
/* @todo */

Example
/* @todo */

Browser support
/* @todo */

Code
/* @todo */