We're using the Font Awesome library for general icons, you can view their entire library at http://fortawesome.github.io/Font-Awesome/icons/.
If you need unique icons not included in the Font Awesome library follow these guidlines when selecting or creating icons:
Font Awesome is a library of scalable vector icons that are easily customizable via CSS. Lightweight and... awesome.
Font Awesome icons can be used in a variety of ways, some of them are indicated below. Be sure to include a span for screen readers to describe the icon.
The basic usage is below:
<i class="fa fa-IconName"><span="sr-only">Description for Screen Readers</span></i>
Arrows are great for indicating links and actions. Throughout the site we are using two different types arrows to indicate toggle link vs. actual link. This must be consistent throughout the site for user experience.
Primarily used on sidebar menus to indicate that there are contents that can be toggled open or close.
Open State:
<i class="fa fa-angle-up"></i>
Closed State:
<i class="fa fa-angle-down"></i>
In example:
Using arrows with links is not necessary on all links and inline should be completely avoided, but we do differeniate between toggle arrows and links with arrows (carets) to avoid confusion. The caret has up, down, left and right options. Let's explore...
In example:
Click this link Go back to the previous pageRight Caret:
<i class="fa fa-caret-right"></i>
Left Caret:
<i class="fa fa-caret-left"></i>
Up Caret:
<i class="fa fa-caret-up"></i>
Down Caret:
<i class="fa fa-caret-up"></i>
You can change the size of icons by adding classes to the i tag.
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
You can control color of the icon/s by adding color classes or modifying CSS.
text-default
text-primary
text-warning
text-success
text-danger
text-info
Just a smattering of icons available, see the entire list at http://fortawesome.github.io/Font-Awesome/icons/
fa-google
fa-facebook
fa-twitter
fa-tumblr
fa-flickr
fa-youtube-play
fa-vine
fa-pinterest-p
fa-linkedin
fa-apple
fa-android
fa-windows
Icons can be floated left or right using pull-right and pull-left classes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet augue nunc. Phasellus laoreet tellus in gravida luctus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet augue nunc. Phasellus laoreet tellus in gravida luctus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet augue nunc. Phasellus laoreet tellus in gravida luctus.