Purpose: Collect and identify icons and icon fonts and define their proper usage.

Category: Icons, iconfonts

Related jiras:

Process Phase:

  • UXI JIRA Created (insert link above)
  • Component Specification draft complete
  • UXI code review complete
  • Reconcile with UIM and KRAD existing designs
  • Conduct user testing (if needed)
  • Routed for review with Kuali UX Working Group and UX/KRAD Working Group
  • Reviewed with KAI
  • Rice JIRA Created (in KULRICE Project)
  • KRAD Implementation complete
  • Component released (insert rice release version below)

Version: 1.0

 

Description

Icons can help quickly identify actions. They're a common visual language which can, in most cases, help bridge language gaps. Icon fonts are essentially that - fonts that are icons, meant to replace graphic icons. Icon fonts are scalable, easier to manage, and have more uses than standard graphic images. The scaling comes in handy for the varying resolutions that exist.

Variations

  1. Icons by themselves
  2. Icons with accompanying label text

Usage

Icons by themselves

The following are some examples of icons being used by themselves:

Icons with accompanying label text

The following are some examples of icons accompanied by their label:

Quick summary of features:

  • Icon fonts allow flexibility and scalability in color, style, and size. When a larger icon is needed, a new image doesn't need to be created.
  • Icon fonts can take the same CSS properties as a link, a button, or any other stylable element.

When to use this component:

  • Icon fonts should be used any time there's need for an icon. They are to replace all image icons in all Kuali application interfaces.

Icon font

Global icons

Since we're using icon fonts which can't be included in this Wiki, please see the Design Guide for an up-to-date list of the icons.

View a full list on the Kuali Design Guide.

Demos

Icons by themselves

<a href="#" class="icon icon-help"><span class="sr-only">Help</span></a>

Note that we're including the label, but we're hiding it off-screen. This is so the links meaning can still be understood (as icons won't be announced typically).

Icons with accompanying label text

<a href="#" class="icon icon-help">Help</span></a>

Note that this setup is the same as the above except we're not hiding the label. It will read the same but the label will appear next to the icon.

Accessibility Considerations

Since icon fonts themselves aren't announced to screen readers (especially if using the PUA space), it's important to always include the accompanying label text, even if it's hidden off-screen. In cases where the icon text is itself converted into the icon font (some libraries do this), you'll want to be careful the label text isn't announced twice.

  • Always include the icon label, even if it's hidden off-screen using .sr-only, except when...
  • Your method converts the label into the icon font, don't include the accompanying label so the label isn't announced twice.
  • Make sure to always use the PUA space so the entities don't conflict with common web entities.
  • Icons that are purely visual/decoration should not be announced as they'd be a distraction. Only functional/actionable icon fonts should be focusable.

Accessibility Resources:

As always, use valid, semantic, proper HTML markup to optimize accessibility.

W3 HTML Validator
WebAim WAVE 

Keyboard Shortcuts

Icons that are purely decoration should never receive focus. Contrastingly, icons that serve a function should be focusable using the Tab key. They should visually appear as if they are focused.

Research and Discussion

None at this time.