Using the Instructure icon set without setting classes

[kcolwell1]

I tried to write this so anyone can learn from it. Please correct me and ask for clarification as needed.

It looks like we can access the icons from the Instructure font from within the RCE without using

class="icon-xxxxx"

With the method outlined below, we can also resize the icons along with our fonts (unlike when using the "class" method, where the icons seem to ignore sizing). The "class" method icons increase in size when changing browser font settings, just not when changing font sizes using the "style" attribute. Anyway...

Overview

Here is one of the fonts that loads with Canvas pages (in my institution's instance as well as all of the free courses I am a part of)

The Instructure icon set is coded as glyphs in this font (using the reserved space from xEA00 to xEB03). We can access the glyphs by calling the correct code and using the "style" attribute in almost any place that text can go:

• <cite>
• <em>
• <span>
• <i>
• <p>
• <a>
• <div>**

** careful - later classes and styles used within the div can nullify styles put on the div as a whole

After my brief testing, I would recommend using <i> or <span> to isolate the icons.

Caution:

If the font doesn't load (or if Instructure ever gets rid of it - listed by them as "for legacy UI"), the icon will show up in most default fonts (Helvetica, Arial, etc.) as simply



because many common fonts treat the codes as, in UTF-8 language, "private use" (and therefore empty for most fonts). There may also be a problem if the font is not loaded for the app (haven't done testing on the app yet).

Using the icons

Call the glyphs by adding two things:

1. add a style attribute to the tag

style="font: 2rem InstructureIcons-Line;"

Note: the font style requires two pieces to function (the font-size and the font-family); I am using rem as a unit for size, but you can easily put in pt, em, px, etc.

Extra Note: the font-family part could also be InstructureIcons-Solid to get the solid version of the icon. I have mixed results with the solid versions.

2. add the corresponding Unicode character reference (put this where the text goes) and remember the semi-colon at the end of the code

&#xCODE;

**See the attached document for the correct code references

Example:

to get this - 

use this code (the 0s in the code are zeros) -

<span style="font: 1rem InstructureIcons-Line;">&#xEA03;Span</span>

<span style="font: 2rem InstructureIcons-Line;">&#xEA03;Span</span>
<span style="font: 3rem InstructureIcons-Line;">&#xEA03;Span</span>

Note: The code will turn into the icon for viewing the page, but when you edit the page, it will still show up as a box. It might be because the editor doesn't load the font (not sure about that); either way, viewing the page loads the icon.

What are the codes?

Instructure lists the icon codes, but these don't match the codes for the glyphs that are actually in the font that is loaded on Canvas pages. The first 16 or 17 match, but then they start to get off track; they are only one off as far as I can tell, but it is hard for me to remember what comes before/after something in base 16. Use the attached document, which uses a table extracted from the font itself. Just find the icon you want and use the three characters from the row then add the character from the column. For the example above, the row characters are EA0 and the column character is 3. 

Accessibility concerns

I am not sure how this would impact things in terms of accessibility, but it seems that my screen reader (ChromeVox) skips over the icons completely. I need to do more testing to see where this could break down. I would welcome any additional considerations that the community can offer especially regarding accessibility.

---

Not sure if this will work for everyone (or anyone for that matter), but try it and let me know how it goes.

[james_tracy]

Hi Kevin,

Have you had any luck making icons visible in the Canvas Student or Teacher App. As at the moment they load as missing fonts in the apps.

On another note is there a way to enlarge the Canvas icons with inline styling?

Cheers,

James

[kcolwell1]

Hello James,

Sorry for the delayed response; we were on Spring Break last week. As far as I know, the admin has to allow (at the very least) the @font-face declaration for  "InstructureIcons-Line"  to be a part of the css file for the app; this also means turning on/allowing css for your app if it is not already. My institution's mobile css is kept locked pretty tight, so I have had to back off on using the glyphs for now until I can make a case for opening it up. I would be interested to learn what you find out.

[Shar]

Hi Kevin Colwell,

Thank-you for putting this very helpful tutorial together. I kept wondering how I could use the solid version of the icons and now you've just shown the me the way.

I also found an even easier way to get the codes for the most current Instructure Icon set. Using the filter feature, can search for what I want and then grab the font glyph code to use in the formula you shared: &#x + code + ;

so &#xEA81 for the info icon. Sweet!:smileycool:

Thanks much,
Cheers - Shar

[mara_6]

Game changing, thank you so much for this