[ARCHIVED] Canvas Navigation Icons

[ELLPIP]

Does anyone know whether Canvas allows us to insert the Canvas navigation icons into Canvas content to assist Learners, and where we can get the image files? Thank you.

[Chris_Hofer · Accepted solution]

Hello there, @ELLPIP ...

You cannot insert the icons (assuming you mean the course navigation buttons on the left side of your Canvas course?), but you can make text links to most of those things.  Check out this Guide: How do I create hyperlinks to course or group cont... - Canvas Community.  Review the section about half-way down the screen called "Insert Course Navigation Link".  Do you think this would work for your needs?

[NHendleyGCS]

That is not very helpful.

I, too, want access to the images of "Pages," "Assignments," "Quizzes," "Discussions," etc. because I want to have an assignment for my students to complete where they have to prove to me they know what those icons mean and what they mean.

I want to tell my students, "When you see the "page-icon", go there for Notes and Instruction. Etc.

I teach a few courses that are online-only and my students need the extra guidance. It also would allow me a way to have a graded assignment so when students complain later "I didn't know," I could pull it up and say "Yes, you did."

I, too, would like access to the images. I'm computer-savvy enough to understand it is an icon and not just an image file, but unfortunately, I currently lack the savvy to know how to repeat it on my end.

[Chris_Hofer]

@NHendleyGCS ...

I'm not sure which "images" you are referring to.  Could you please provide a screenshot or two of what you are seeing on your screen so that I might be able to help troubleshoot this with you?  Any additional information from you would be great...thanks!

[NHendleyGCS]

I do not have permission to upload images... 

When in Modules view, there is an icon to the left of each Page (looks like a sheet of paper), Quiz (looks like a rocket), Discussion (2 talk bubbles), Assignment (looks like the Page, but with a pen(cil))

Those icons are the ones I mean. My distict has only been completely Canvas for a year and I want to be able to reference this in syllabi and things like that, if that makes sense.

[Chris_Hofer]

@NHendleyGCS ...

Oh...I understand what you mean now.  Thank you for the explanation.  So, I'm not exactly sure if those icon sets are available for you to use within your Canvas content pages or not.  Someone else might know a definitive answer on that.

I do have three other possible solutions for you, however.

• When I am using my Windows 11 laptop and the Microsoft Edge browser, I can right-click anywhere within the RCE (Rich Content Editor), and then select the "Emoji" option (Win+Period) from the pop-up menu.  This allows me to choose various icons that look similar (but not exactly the same) as the ones you and I see on the "Modules" screen.  Here is an example of emoji icons I found which are similar:
  
• Another option might be to use an image cropping tool such as the "Snipping Tool" available in Windows to snip each of these icons, and make *.jpg files out of each of them.  Then, when you want to use them in other areas of your course, you can do that.
  • How do I upload and embed an image in the Rich Con... - Instructure Community (canvaslms.com)
  • How do I embed images from Canvas into the Rich Co... - Instructure Community (canvaslms.com)
    
• Yet another option would be not to use icons at all (though I do see the value that you describe).  Instead, as you refer to areas of your course from your course announcements (or wherever you'll be doing this), make links to those areas of your course.  (Of course, you can also do this if you include the icons as well.)  You can link to parts of your course by following the instructions in this Guide:
  • How do I create hyperlinks to course or group cont... - Instructure Community (canvaslms.com)

Do you think any of these options might work for your needs?

[NHendleyGCS]

Thank you for the suggestions and the attempts to help. I was hoping there was an easy answer of "Hey, here's how to use and reference our icons but I suppose there are some... issues in allowing users to do that.

I've considered doing the image snip like you've mentioned. My issue with that method is that sometimes, images break, they don't load, firewalls get involved or just whatever can break on the internet will break. 🙂

The similar icons is indeed true. I'll admit it is a bit frustrating when I use my school-issued macbook to make something, go view it on my PC at home and it looks different and then look again on my students' Chromebooks only to see it look even different. [[Tangent... For a great example of this, IMO, try to add the sun 'emoji' using the WIN+. method you mentioned. I ran into that this summer. I'm still flabbergasted! ☀️ Hmmm... it may have worked here... but when I did it for a module title in Canvas, instead of the yellow circle with orange corona I expected, I basically got a fancy asterik.]]

Articles like https://community.canvaslms.com/t5/New-Quizzes-Discussion/Do-you-have-the-Quizzes-Rocket-Ship-icons-... make me think these images exist out there somewhere for use. 

My Google Fu has just not been strong enough!

But thank you for all your help!

[chriscas]

Hi @NHendleyGCS,

I'm not sure if this in the intended way to do things or not, but if you switch into html mode, you can paste the following codes to get some of the icons:

• Document: <i class="icon-document"></i>
• File: <i class="icon-paperclip"></i>
• Discussion: <i class="icon-discussion"></i>
• Assignment: <i class="icon-assignment"></i>
• Classic Quiz<i class="icon-quiz"></i>
• New Quiz: <i class="icon-quiz icon-Solid"></i>
• Link: <i class="icon-link"></i>

I got those by inspecting the code used on the modules page, so again it may not be the intended way to do things but it does seem to work when I try it.  There is a Iconography page on the Instructure UI site, but as far as I know everything there is about designing things outside of Canvas to look like Canvas, so the codes provided do not work in the rich content editor.  Someone else may come along and provide more info, but I thought I'd post this in case it's helpful to you.

-Chris

[NHendleyGCS]

Thank you. I'll have to look into that. I know a bit of HTML but mine is ... beginner intermediate at best, I'd daresay. I looked at the HTML and couldn't quite figure it out. You listing it like that is helpful. Thanks.

I was going to try and test it here but oh yeah... I guess we're not technically in Canvas, are we? 🙂

The HTML/character codes for iconography is a bit beyond my skillset, but I like to think I'm always willing to learn.

Thanks again!