This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date.
The WikiFont font is created from SVG icon files related to the ones above. View a PNG generated from the current font.
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
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.
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, they will start the process of adding a citation to the article content. This will be used on the Visual Editor toolbar.
- 2. Unlock icon
- 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
Using Wikicons in OOjs UI
OOjs UI provides these icons in its MediaWiki theme (Gerrit change 188289). 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.
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.
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)
<a class="..." title="Edit Foobar to add your comments" > <span class="wikiglyph wikiglyph-pencil" aria-hidden="true"></span> Edit </a>
title attribute on the surrounding tag is a situation-specific tooltip for accessibility.
aria-hidden="true" ensures screen readers and other assistive technologies do not "read out" the icon glyph.
If you place the span inside Agora classes (such as
mw-ui-button mw-ui-constructive 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.
You can compose icons by stacking glyphs, which allows each one to be different colors.
To address some browser issues Web pages will switch back to using SVGs (mobile apps will continue to use WikiFont). Work is progressing in Gerrit change 165922. 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