Icon standardisation

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

Overview
/* @todo */

Example
/* @todo */

Browser support
/* @todo */

Code
/* @todo */

Overview
/* @todo */

Example
/* @todo */

Browser support
/* @todo */

Code
/* @todo */

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 */