Dear Educators; Iconography

Dear Educators; Iconography

Pushing the LMS - Part 3

In the first two parts of our "Pushing the LMS" series, we explored how embracing basic HTML can empower educators to enhance their Learning Management System (LMS) content, and how leveraging the Bootstrap framework can elevate design and interactivity. Now, we turn our attention to integrating another visual element powered by icons and other visual elements.

Building on these foundations, the natural progression is to include iconography elements that can visually guide learners and make your content more intuitive.

What are Icons?

Icons in the context of an LMS (Learning Management System) are small graphical elements that visually represent actions, features, or categories within the LMS interface. They serve as intuitive visual cues to help users quickly understand the purpose or functionality of different elements without relying heavily on text. Many LMS’s have built in icon libraries that we can access such as Font Awesome or icons specific to LMS systems like Canvas, or even special characters (including emojis) provide educators and designers with a library of icons that can be leveraged to enhance the educational experience for students and staff.


What Are Font Awesome Icons (Moodle)?

Font Awesome is a popular icon toolkit using Cascading Style Sheet (CSS) rules and usually works in conjunction with Bootstrap. These scalable icons that can be accessed through specific class name calls within HTML. These icons are widely used across modern websites and applications, and they can be a game-changer in making your LMS content more engaging and enhancing the visual appeal of your curriculum.

Sample of some of the available Font Awesome icons.
Sample of some of the available Font Awesome icons.

It is essential to determine whether your LMS supports Font Awesome Icons, to do this utilize the Font Awesome Icons for LMS I created by simply copying the HTML into your LMS editor. If you see icons in the newly created web page, the LMS supports the Font Awesome Icon set and you can utilize the sample code to integrate into your own eLearning course sites.

Example:

Example of a button using an thumbs up icon from the Font Awesome icon set.
Example of a button using an thumbs up icon from the Font Awesome icon set.
<a href="#" class="btn btn-primary">
   <i class="fa fa-thumbs-up"></i> Like
</a>        

Explanation:

Font Awesome uses the <i> (italic) tag with specific classes to render icons:

  • fa: The base class for Font Awesome icons.
  • fa-thumbs-up: Specifies the "thumbs up" icon.


Can I use Icons in the Canvas LMS?

The Canvas LMS has a wide selection of icons built-in and used by the interface. With the proper html and class calls you can access the vast catalogue of icons available within this LMS.

Sample of some of the available icons in the Canvas LMS
Sample of some of the available icons in the Canvas LMS.

In the Canvas LMS editor, you can access the available icon library by copying the Canvas LMS Icons HTML code. This will help you visualize the available icons and utilize the sample code to integrate into your own eLearning course sites.

Example:

Example of a button using an thumbs up icon from the Canvas icon set.
Example of a button using an thumbs up icon from the Canvas icon set.
<a href="#" class="btn btn-primary">
   <i class="icon-like icon-Solid"></i> Like
</a>        

Explanation:

Like Font Awesome, the Canvas LMS? uses the <i> (italic) tag with specific classes to render icons:

  • icon-like: Specifies the “thumbs up” or “like” icon
  • icon-Solid: Specifies to use the solid or filled version of the icon.


Special Characters and Emojis

Special characters are symbols that extend beyond standard letters and numbers you see displayed on the screen. They include punctuation marks, currency signs, mathematical operators, typographic symbols, and even emojis. These characters help to provide additional meaning, clarity, or context within text. For example, symbols like the ampersand (&) are used to replace the word 'and,' while others, like the copyright mark (?), indicate ownership. In eLearning, using these special characters effectively can greatly improve the readability, context, consistency, accessibility and the overall experience of the learning process.

Emojis are considered special characters and can be useful in eLearning when used appropriately. They can add emotional context, emphasize points, and make content fun and engaging.?

Example of a button using an thumbs up emoji.
Example of a button using an thumbs up emoji.
<a class="btn btn-primary" href="#"> ?? Like </a>        

Understanding the availability of special characters can give you access to icons that otherwise might not be available in the LMS you are using. The Brightspace LMS interface does leverage icons, however they are encoded in a way that prevents calling them within the LMS’s editor.


By embracing iconography, you are not just adding visual flair to your courses; you're enhancing the overall learning experience. Icons can make your content more intuitive, guide learners through complex material, and create an engaging environment that supports student success.

Resources:


#eLearning #StudentUserExperience #SUX #LMS #FontAwesome #Moodle #Canvas #Icons #Iconography?

要查看或添加评论,请登录

Corey Stroeder的更多文章

  • Dear Educators; Bootstrap for LMS

    Dear Educators; Bootstrap for LMS

    Pushing the LMS - Part 2 In Part 1 of our series, Dear Educators; Learn HTML, we discussed the basics of…

    1 条评论
  • Dear Educators; Learn HTML

    Dear Educators; Learn HTML

    Pushing the LMS - Part 1 I can understand this seems unconventional, asking educators who use a Learning Management…

  • How do you present Celsius or Fahrenheit in your eLearning Curriculum?

    How do you present Celsius or Fahrenheit in your eLearning Curriculum?

    Did you know there are characters specifically for Celsius (℃) or Fahrenheit (℉)? These are part of the Unicode…

社区洞察

其他会员也浏览了