cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
tobe_baeyens
Community Contributor

How can you use the InstructureIcons in pages?

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?

Tags (2)
7 Replies
lph
Community Champion

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
Community Participant

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
Community Champion

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:

Icon Class

I hope this helps.

Shar
Community Champion

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
Community Champion

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

venitk
Community Champion

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
Community Champion

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>

Heading level 3 with a like icon

Cheers - Shar