Language selection

Icons

Design and coding

Use one of the two icon sets, Glyphicons or Font Awesome for decorative purposes. Icons are glyphs − picture-based fonts, similar to wingdings. They do not convey meaning, unlike traditional fonts. Therefore, real text must accompany the icon to ensure accessibility requirements are met. Make the text visible or invisible, as long as it is present.

Correct use

Compliance point(s):

  • Accompany all icons with text
    • The text can be invisible (.wb-inv) if needed, but must be present for accessibility reasons
  • Include a space between the </span> tag and the link text
    • This adds proper spacing so the link is easy to read, for example </span> link text</a>
  • Use icons within a <span> tag when they are within a hyperlink (<a href=""><span class=""></span> link text</a>
  • Understand and implement the related supporting principles

Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use icons to represent a third party's logo, as this can be contrary to that company's brand asset policy. For instance:
    • Facebook's do's and don'ts states: "Use any icons, images or trademarks to represent Facebook other than what is found on this resource center."
    • Twitter's brand assets and guidelines states: "Our logo is always either blue or white. The Twitter bird is never shown in black or other colors."
    • Pixel-perfect spacing and other considerations are also required. It is best, legally-speaking, to use the actual third party logo image

Glyphicons

Glyphicons provides 250 glyphs. This is part of the WET core build.

View Glyphicons

Font Awesome icons

Font Awesome provides 600+ glyphs. These icons are not part of the WET core build. Consult the Font Awesome website for implementation instruction.

View Font Awesome icons View Font Awesome stacking, resizing, rotating, spinning icon examples

Enhanced use

Add-on features

Additional add-on features and behaviours are available.

Supporting principles

Date modified: