Icons
A simple and easy to use icon class is available in Canvas. The icon class .icon
assumes very little about the actual icon itself, but instead serves as an easily modifiable container in which you can define or place your icon – whether that icon is an SVG, font, or bitmap. Canvas does not include icon glyphs or fonts by default, relying on the user to specify how these should be configured.
<i class='icon icon-medium'></i>
Thinks of the icon
elements as a bounding box in which you can place – either inside or directly as a background – any image, SVG, or font. The bounding box is rectangular, but by default, they are defined as square (1:1). Canvas provides 5 unique icon sizes (defined below). The sizes can be easily changed. Furthermore, these sizes are consider responsive, with the dimensions changing as defined by the user, with changes in screen size.
Class | Base Size | Example |
---|---|---|
.icon-mini
|
16x16 | |
.icon-small
|
24x24 | |
.icon-medium
|
32x32 | |
.icon-large
|
48x48 | |
.icon-jumbo
|
64x64 | |
.icon-huge
|
96x96 |