8 Iconography
There are the icons included by default for use in the user interface. You can easily add any of the below icons with just the class name. The icons are vector based, so there is no pixelation or blurring on high-resolution screens as there would be if the graphic was raster and needed to scale up. They can be controlled with CSS, like the size, color, shadow, etc.
8.1 Information and Services icons
- .icon-family
- .icon-book
- .icon-road
- .icon-briefcase
- .icon-heart
- .icon-certificate
- .icon-housing
- .icon-leisure
- .icon-recycle
- .icon-medkit
- .icon-chart-bar
- .icon-info
8.2 User interface icons
- .icon-mail-alt
- .icon-user
- .icon-users
- .icon-videocam
- .icon-picture
- .icon-camera
- .icon-th
- .icon-ok
- .icon-cancel
- .icon-link-ext
- .icon-print
- .icon-location
- .icon-phone
- .icon-fax
- .icon-cog
- .icon-cog-alt
- .icon-calendar
- .icon-resize-full
- .angle-left
- .icon-angle-right
- .icon-angle-up
- .icon-angle-down
- .icon-globe
- .icon-check
- .icon-check-empty
- .icon-plus
- .icon-minus
- .icon-pinterest-circled
- .icon-twitter-circled
- .icon-facebook-circled
- .icon-gplus-circled
- .icon-download-alt
- .icon-accessibility
8.3 Icon sizing
.tera
Tera
.giga
Giga
.mega
Mega
.alpha
Alpha
.beta
Beta
.gamma
Gamma
<div class="inline-block soft">
<span class="icon-family {$modifiers}"></span>
</div>
<div class="inline-block soft">
<span class="icon-alert {$modifiers}"></span>
</div>8.4 Icon colours
.primary-color
Primary colour
.secondary-color
Secondary colour
.grey
Grey
<div class="inline-block soft">
<span class="icon-family tera {$modifiers}"></span>
</div>