[ARCHIVED] How can you use the InstructureIcons in pages?

[tobe_baeyens]

Hey,

Is there an easy way to use the icons from the stylesheet (http://instructure.github.io/instructure-icons/ ) in pages? Do teachers need to upload these icons into there course or can they use some embed code?

[lph]

Hi,

Great question. This page on icons is a great resource. There is no upload on the FFT. I'm not sure on the paid. Teachers simply add the icon class to the anchor link using the HTML editor. It works like a charm.

[christine_mckeo]

Hi lph -- thanks for your response! I had this question, too, and the icons page was really helpful. Can you explain what you mean by:

Teachers simply add the icon class to the anchor link using the HTML editor. It works like a charm.

I'm a little new to using styling in the HTML editor, and was just wondering if you might have some documentation.

[lph]

Hi

Absolutely. 

Browse to the page you want to add an icon >> Click edit >> Click HTML Editor

This page looks intimidating but it is the HTML which creates the page. Between the angle brackets < and >, you will see HTML tags such as <a><p><table> etc. The <a> is known as an anchor (a for anchor). This is where the link is being built. 

Find your link text

<a href = " " >

Before the href add class="" and the name of the icon. 

Here is an example of adding the class:

I hope this helps.

[Shar]

Howdy,

Yes, using the canvas icons is free on the institutional/branded accounts as well.

I also use the icons to add mouse-over text (like instructions) to words that I want to highlight.
<a class="icon-like" title="Helpful mouse-over text">Helpful hint</a>

Cheers - Shar

[laurakgibbs]

Wow, this is great: bookmarked! I did not know about this resource before. Thanks, everybody!

[venitk]

1) has anyone tested these on mobile yet? 

and 

2) Let's say I wanted to use them to decorate a header, instead of a link. How would I do that? 

Thanks for the share!

[Shar]

Hi  @venitk ,

The icons do not show up in the Canvas mobile apps, the same way the do not display in the Rich Content Editor.

If you want icons that will show up in the mobile app, you'll have to link to other icon sets, like Icons8, Get Emoji, and Flaticon.

And to put icons outside of an anchor tag (link) you'll have to use HTML editor and i tags. For instance:

<h3><i class="icon-like"></i>Heading level 3</h3>

Cheers - Shar