Kevin Colwell

Using the Instructure icon set without setting classes

Discussion created by Kevin Colwell on Dec 5, 2017
Latest reply on Mar 20, 2018 by Kevin Colwell

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)

screenshot of CSS @fontface styling that includes the InstructureIcons-Line font set

 

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 - 

screenshot of admin icon from the InstructureIcons-Line font in three sizes with text "Span" in three sizes

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.

Outcomes