Design/Archive/WikiFont

WikiFont is no longer officially supported. Please refer to the OOUI icons instead. For users still in need of a WikiFont, there is a repo by @prtksxna providing generated fonts.

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

Creating Icons

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, 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

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

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)[reply]

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.

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)

<a class="..." title="Edit Foobar to add your comments" >
  <span class="wikiglyph wikiglyph-pencil" aria-hidden="true"></span>
  Edit
</a>

The 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.

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