Design/Archive/WikiFont

WikiFont GLYPHS

The WikiFont font is created from SVG icon files related to the ones above. View a PNG generated from the current font.

Colors


COLOR PALETTE

Use colors only if it helps user understand a workflow.
 * Blue signifies a progressive action;
 * Green signifies a constructive action;
 * Red, orange, and yellow are to warn user of a destructive action depending on severity (high to low respectively).

Colors on icons should be used sparingly. For example, in the effort of being inviting, we use the color green to encourage clicks that will help show appreciation for the work of our contributors to keep them

Best practises
Make sure icons are pixel-perfect so they retain their meaning and look sharp in all sizes.

An icon should fully express its intended meaning without any text companion. In selective cases when a message or a word is used with icon(s), icon(s) should always appear at the beginning of according to reading direction.

Avoid local concepts
Our users are very diverse. Making sure concepts are not offensive and remain localizable are equally important. Icons based on a specific region may not have the same meaning for the rest of the world. For example, an envelope is more practical than a traditional American mailbox. Avoid concepts such as gestures, animals, religion, humor, ethnicity, and gender.

Visual & Textual directionalities
Designers should also be aware of icons that convey directionality. Concepts such as “forward” and “backward” are associated differently to “right” and “left” depending on the writing direction of our language. For an English speaker, a “next” button can use an arrow pointing to the right as an icon. Conversely, a Hebrew speaker would expect the arrow to point to the left in order to convey the same meaning. Symmetric icons are always safest. However, should you come up with a more effective solution to convey an idea or a message that is not symmetric, provide two versions to support both directions.

Reuse for consistency
When creating new icons, reuse and recompose from existing iconography as much as possible as they have established a meaning with our users. For example, this is an edit icon. To symbolize a disabled edit action due to varying reasons, compose the meaning from the existing edit icon. To symbolize that an edit has been reverted, repeat the same with existing edit icon.

Icon requests
List your (1) icon requests with a (1a) description for its intention and meaning below:


 * 1. Citation icon
 * 1a. When a user clicks on this icon, he or she will start the process of adding a citation to the article content. This will be used on the Visual Editor toolbar.
 * 2. Unlock icon
 * 2a. Flow is changing the "Close/Reopen topic" actions to "Lock/Unlock topic" (Trello card. You can't reply or edit a locked topic. WikiFont has a "lock" (padlock) glyph, but not an opened up padlock à la Crystal_Clear_action_half_lock.png
 * 3. User icon
 * 3a. Perhaps I missed it; the Compact personal bar has a user icon, but I don't see it example above.
 * 4. Edit and Arrows
 * 4a. I use http://fortawesome.github.io/Font-Awesome/ and connot live without fa-edit and all arrows. Social Media brands would be nice as well. --Subfader (talk) 20:26, 1 October 2014 (UTC)

Using Wikicons in OOjs UI
OOjs UI provides these icons in its MediaWiki theme. Many icons have a "flipped" versions for RTL (right-to-left) languages, and many have colored variants to indicate intention (progressive/constructive/destructive). The RTL versions display automatically depending on the wiki's or user's language. You get the colored versions when you specify certain flags.

See icons in MediaWiki theme, usage guidelines are a TODO

Using WikiFont
The Wikifont built out of these icons is at https://github.com/munmay/WikiFont, currently a "Wiki-Glyphs" subset of eventual planned set. See it in the at http://munmay.github.io (soon); view HTML of demo page.

Flow is using a local copy of the font for all its icons. Mobile app is using a second font for additional icons, Extension:MobileFrontend and Media Viewer plan to use it.

The CSS to use it is at https://github.com/munmay/WikiFont/blob/master/wikiglyphs.css. This includes workaround CSS for IE6 and 7 only.

Then in HTML, (e.g. in Flow)

The  attribute on the surrounding tag is a situation-specific tooltip for accessibility. ensures screen readers and other assistive technologies do not "read out" the icon glyph.

If you place the span inside Agora classes (such as  class, it will darken and lighten according to the hover/click/disable state along with the other text in the "button".

There will be a flash of missing content as the font loads. The glyphs are in a special Unicode range so the browser won't show anything, then when the font is loaded, the icon will appear. In a text browser the CSS rule probably won't do anything.

Stacking
You can compose icons by stacking glyphs, which allows each one to be different colors.

Future plans
To address some browser issues Web pages will switch back to using SVGs (mobile apps will continue to use WikiFont). Work is progressing in. We will modify ResourceLoader so developers can:
 * register SVG icons to be used as CSS backgrounds without as much manual fuss
 * request runtime modifications of an SVG image such as RTL flipping and color tinting
 * eventually ResourceLoader will automatically generate rasterized PNGs as fallback for older browsers