Canvas seems to use a modified version of Bootstrap and other libraries that you can tap into when creating content. Some of the most helpful ways this can assist your course designs is to give you access to icons and buttons.

General Use

Canvas has a set of built-in icons that you can find documented in their iconography. These icons are set to content in a course by setting classes on content. The simplest way to include an icon in your content is to use the i attribute followed by the icon type class and the icon name class.

Icon Type Classes

There are two icon type classes: icon-Solid and icon-Line.

Icon Name Classes

There are many icon names that you can find on the iconography page.

For example, to include a solid-style alerts icon, simply paste the following line to your content:

<i class="icon-Solid icon-alerts"></i>

Or to include a line-style audio icon, use the following:

<i class="icon-Line icon-audio"></i>

Buttons

The Canvas editor may not allow you to create button HTML elements, but you can still create a HTML elements and make them look like buttons by applying button classes.

<a class="Button">Button</a>

<a class="Button Button--Primary">Button</a>

<a class="Button Button--secondary">Button</a>

<a class="Button Button--success">Button</a>

etc...

Button Sizes

To change button sizes, you can also add the following classes: Button--large, Button--small, and Button--mini.

Buttons and Icons Together

To use buttons and icons together, you can simply apply icon classes to the button a element as in these examples:

<a class="Button Button--danger icon-Line icon-audio" type="button">Hey, this is a red button with an audio icon!</a>

<a class="Button Button--primary icon-Line icon-analytics">Hey, this is a primary button with an analytics icon!</a>

<a class="Button Button--success icon-Solid icon-check Button--large">Hey, this is a big 'ol success button with a check icon!</a>