Using the Canvas Styleguide: Icons

jperkins
Instructure
Instructure
17
61948

Introduction to this Series

This is the second document in a series that I will be writing in regards to using the Canvas Styleguide. If you are unaware, the Styleguide is a public tool used by our engineers to make Canvas look and feel consistent across the different parts of Canvas. What this means is that the Styleguide is NOT designed for using items within the Rich Text Editor. With that in mind, certain parts or elements of the Styleguide do work in the Rich Content Editor. It has taken me a year of experimenting and playing with Canvas and the Styleguide to identify exactly which elements work and which ones don't.

As I've browsed the community, I've seen a lot of people reference the Canvas Styleguide, but there is no clear explanation for non-technical users on how to use it. So I'm approaching this blog series from a non-technical approach. Be aware that you will be using the HTML Editor to accomplish certain tasks within Canvas. I will walk you through the different steps of using the Rich Content Editor, HTML Editor, and Styleguide to make cool things happen.

If you haven't seen the first document, you may find it worthwhile to look at before proceeding to this content. - Using the Canvas Styleguide: Buttons

Canvas Styleguide - Icons

This document will help you learn to include icons used throughout Canvas in the Content you are creating for your classes. At the end of this session, you'll see how to insert icons as in the image below.

Screen Shot 2015-09-18 at 1.48.13 PM.png

To get started, I want you to:

    1. Create a New Page - How do I create a new page in my course?
    2. Insert a Link (to anything you like) - How do I create a hyperlink in the Rich Content Editor?
    3. Open the HTML Editor - How do I edit content in the HTML view in the Rich Content Editor?

You'll want to make sure your HTML code looks similar to the image below.

Screen Shot 2015-09-18 at 1.50.41 PM.png

We are going to modify the class of the link to include a Facebook Icon. Your code should have class="icon-facebook-boxed" in it, as seen below.

Screen Shot 2015-09-18 at 1.52.37 PM.png

Hit Save and now you should have a link to with a Facebook Icon next to it!

Screen Shot 2015-09-18 at 1.48.13 PM.png

We aren't limited to just Facebook Icons. Click Here to see a full list of the different icon classes you can use for your course content. Otherwise here is a sample of different ones you can use in an image below.

Screen Shot 2015-09-18 at 1.56.38 PM.png

Good luck using Icons in your course content. They are really fun to combine with Buttons! Smiley Happy If you don't know how to make buttons yet, please see Using the Canvas Styleguide: Buttons​ article I wrote.

Hint! To have both Buttons and Icons, just put a space between the different classes. Like below...

Screen Shot 2015-09-18 at 2.00.17 PM.png

17 Comments
apelt
Community Member

Like your Buttons tutorial, this was super helpful! Now you just need to make these for every single element in the Styleguide, and I'll be all set. Smiley Wink

kroeninm
Community Champion

 @jperkins ​, these are great tutorials.  I'm working on learning how to utilize bootstrap for a project with a faculty that wants a specific look and feel so we are linking to the content outside of Canvas.  But I recognized some of the classes and now I see mention of bootstrap in the styleguide but can you clarify the usage of bootstrap in how it relates to the styleguide in Canvas?  Is it version 2 or 3 that is set as an include?  I haven't finished going through the bootstratp tutorials but I see that I can utilize some bootstrap code that isn't always in the styleguide.


Thanks!  Probably I'll figure this out when I finish going through the tutorials so this may be premptive Smiley Happy

- Melanie

jperkins
Instructure
Instructure
Author

Melanie: The best explanation of use of bootstrap in Canvas is found in the https://canvas.instructure.com/styleguide#grid​. The Grid option basically is bootstrap with very minor changes. Some of bootstrap 2.x is used in some other areas of canvas. I haven't done a guide on this yet as bootstrap is unsupported by our mobile apps. So you can make some really great looking stuff on the desktop, but it can have some problems when student's are using the mobile app. Let me know if you have other questions.

lauramaewojo
Community Participant

Buttons and icons!! I am in love!! Thank you!

ramsden
Community Explorer

Can the icons pickup either Primary or Secondary color similar to the way buttons do?

kroeninm
Community Champion

Not sure if this helps as I don't use buttons often  @ramsden  but you can change the color of just the basic icon with a style tag, style="color: red;" and I see that if you add the class to a hyperlink it turns the appropriate color.

Just as an FYI on iOS in the Canvas App, the icons don't appear still as far as I know so I'm not quite as excited about them Smiley Happy

<p>Remember to take <a id="" class="icon-add" title="Week 1 Quiz: Snails and Schistosomes" href="https://community.canvaslms.com/courses/1635998/quizzes/2348554" target="" data-api-endpoint="https://oregonstate.instructure.com/api/v1/courses/1635998/quizzes/2348554" data-api-returntype="Quiz"><i class="quiz"></i>Quiz 1</a> this week.</p>

<p><i class=" icon-check" style="color: green;"></i> Icon with color by itself.  </p>

Screen Shot 2016-07-28 at 8.20.14 AM.png

- Melanie

ramsden
Community Explorer

Thanks Melanie! I also discovered that Hex or RGB numbers also work!

Example: <p><i class="icon-quiz" style="color: #cc9966;"></i> Quiz</p>

amanda_taintor
Community Contributor

Are there any more tutorials? Or is it just the two? These were great!

jperkins
Instructure
Instructure
Author

I have some half finished drafts, but my wife and I had our first child earlier this year, and that has basically killed the free time I used to make these. Smiley Happy

But I'll see what I can do.

amanda_taintor
Community Contributor

Well I suppose I can cut you some slack for a baby Smiley Happy

ryan_corris
Community Coach
Community Coach

Really?  Where are your priorities?  (Really, I am just kidding!!!)  Enjoy your family, but I do look forward to more tutorials when you have time in the future. 

penny_christens
Community Participant

Hi  @jperkins ‌
I am not able to find the full list of the different icon as I was before.... the link takes me to the Style Guides, but I cannot find the list as I expect here.
Can you direct me to where I find that list now? Thanks!

jperkins
Instructure
Instructure
Author

 @penny_christens ‌ Sorry it took me so long to respond to you. I have looked for the updated icons, and have not been able to find them, until this morning. Smiley Happy I found all the updated icons. They're not as easily viewable (in one page like before), but you can go through and click on each file to see it. Here is the link for the icons in two different styles instructure-ui/packages/ui-icons/src/__svg__ at master · instructure/instructure-ui · GitHub  Just click into the folders and then on each .svg file to preview them. Using the file name before the svg as the class should let you use them. Hope that helps!

penny_christens
Community Participant

Thanks Jeremy!
They were a little more useful in the Style Guide - any chance they might end up back in that resource?
Smiley Wink Thanks for the assist buddy!

oltsupport
Community Novice

After finding the GitHub files, how do you distinguish the line from the solid in Canvas HTML? Do you have to upload all the icon files? Loving your work by the way. This is the type of UI I've been working towards with our Univ. just switching to Canvas last year.

penny_christens
Community Participant

I feel like we would benefit from an update to this information - the list of icons has changed/evolved/I'm not entirely sure how. Smiley Happy

I've always admired how @JeremyPerkins explains things - maybe we can get him to come back around and refresh us on this topic?

michelle1_krumm
Community Member

Is there a way to increase the size of the icon?