Purpose

Graphics give your pages a personal touch and breaks up text. Using graphics helps engage the learner and provides social presence for the instructor.

Emoticons

Thanks to Corrine Haverinen for this content!

NOTE: If you refer to icons in instructions for students -- such as go to the Module with the red heart icon -- be sure to add enough descriptive text for students with visual impairments, such as: "Go to the Module with the red heart icon and the header Unit 2 Readings."

❉ HTML SPECIAL CHARACTER ICONS ❉

DON'T USE FONTS TO MAKE ICONS, THEY MAY NOT WORK EVERYWHERE
There are six digit codes you can put in the HTML, such as ⇧ - which is an arrow: ⇧
Try copying and pasting the icon itself - I have had good luck with this, and no need to delve into the HTML
If you can copy and paste the icon, you can add them to Modules. In my tests, pasting the code into the editing of the Module names did not work, but pasting the icon itself did.

Following are some web sites with special characters that work in HTML

Emoji Unicode Tables: 😻 😁 🙉 🌞 🐋 🐓 😈 🗽 📓 🐷 🐰 🐮 🍉 ✏ ✊👻
HTML Symbols, Entities, & Codes: htmlarrows.com
See the Arrows page: ⥣ ↘ ↵ ⇧
See the Symbols page: ☟☞ ☠ ☢ ☤ ☒ ☆ ©
UT Unicode Character Table: unicode-table.com
Go to the Most Popular, or use the navigation to Sets
- Arrow symbol ➩ ❤ ♠ ♠ ♣ ♣ ♣ ♥ ♥ ♥♦ ♦☎
- Heart symbols ❦ ❧ ☙ ❥ ❣ ♡ ♥ ❤ ➳ 💓 💔 💕 💖 💗 💘 💙 💚 💛 💜 💝 💞 💟
- Flower symbols ⚜ ✥ ✤ ✻ ✼ ✽ ✾ ❀ ✿ ❁ ❃ ❇ ❈ ❉ ❊ ❋ ⚘ ⁕ ꙮ ꕤ ꕥ ☘ 🍀 🌼 🌻 🌺 🌹 🌸 🌷
- Emoji 😓😖
- Stars symbols ★ ☆ ✪ ✫ ✯ ✡ ⚝ ⚹ ✵ ❉ ❋ ✺ ✹ ✸ ✶ ✷ ✵ ✴ ✳ ✲ ✱ ✧ ✦ ⍟ ⊛ ⁕ 🔯 🌠 🌟 ﹡ ❃ ❂ ✼ ✻ ✰ ⍣ ✭ ≛ * ⚙

CANVAS STYLE GUIDE ICONS

WARNING: These icons may not show on the Canvas Mobile App, but will work on mobile browsers.

See a list of icons and their codes on the Canvas Style Guide Icons section.
See also an icon list on this open Canvas Course

Two Ways to Insert Canvas Style Guide Icons

1. Insert as a Link

Insert a Link (to anything you like) - How do I create a hyperlink in the Rich Content Editor?
Go to the Canvas Style Guide, copy the code for the icon you want to use
Open the HTML Editor - How do I edit content in the HTML view in the Rich Content Editor?
Paste into the HTML - find the <a> tag code for the link you placed, look for the class=""
Between the quote marks, paste the icon code

Examples:

This test will be timed

<p><a id="" class="icon-quiz-stats-time" title="Dummy Quiz" href="//courses/19159/quizzes/30142" target=""> This test will be timed</a></p>

Submit Your Paper by Friday

<p><a id="" class="icon-paperclip" title="" href="https://canvas.santarosa.edu/courses/19159/assignments/74613" target=""> Submit Your Paper by Friday</a></p>

Remember to take Quiz 1 this week

<p>Remember to take <a id="" class="icon-add" title="Week 1 Quiz: Snails and Schistosomes" href="/courses/1635998/quizzes/2348554" target="" data-api-endpoint="https://canvas.santarosa.edu/api/v1/courses/1635998/quizzes/2348554" data-api-returntype="Quiz"></a> this week</p>

2 Insert with an <i> tag

Icon colored, with text next to it.

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

Navigation Ideas

Piktochart

Easy to use to Print and/or Design Infographics and Presentations. The free version provides everything you need. Infographics can be presented as images or prezzi-style slide show. https://piktochart.com/

"Everyone loves Infographics, it is one of the most effective ways to relay key information." -Andrea (SRJC canvas ninja)

Example Piktochart https://create.piktochart.com/output/15464937-piktochart-for-tech-it-out-day

Alternatives

Google images (or Flickr): "I am always searching and inserting images from the web to enhance my pages. I look for cartoons on the topic to break up text and add a personalized feel." -Andrea (SRJC Canvas Ninja)
Canva: Canva allows you or students to create and collaborate on graphics (including infographics). It provides photo editing tools as well. The free version does everything you would need. See more details: Graphics: Canva
Other Infographic tools: There are a wide range of infographic building tools. We showcased Pictochart because of their large template collection and easy to use format. But there are tools specialized for things like MAPS, PHOTOS, SOCIAL MEDIA STATS, FLOW CHARTS, RESUMES ect. Here is an article that compares several tools: http://www.jeffbullas.com/20-cool-tools-creating-infographics/