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
- The text can be invisible (
- 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>
- This adds proper spacing so the link is easy to read, for example
- 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.
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: