Material Design Icons in Your Captivate eLearning

I'm a big fan of pictures rather than words. Because of this, I'm always looking for ways to use iconography instead of words to convey meaning in my eLearning projects. In this Adobe Captivate tutorial, I show you how you can use the Material Design icons for your Adobe Captivate 2019 eLearning projects for your navigation controls and other buttons.

The Material Icons Guide Here is where you can get the line of text to add to your Index.html file. I would have pasted it here but angle brackets are not allowed in YouTube descriptions.

https://google.github.io/material-design-icons/#getting-icons

Icon Font

https://github.com/google/material-design-icons/tree/master/iconfont

Fontawesome Icons Into Your Responsive Adobe Captivate eLearning

In this video tutorial, I show you how you can set up the Fontawesome icons into your responsive design Adobe Captivate eLearning. This hack works for Captivate 2017 as well.

Here is the Fontawesome 4.7 cheatsheet referenced in the video: https://fontawesome.com/v4.7.0/cheatsheet/

Fonts and Adobe Captivate

There are essentially three possible outcomes when designing and publishing Adobe Captivate projects. There are Flash based standard projects, HTML5 based standard projects and responsive design based projects. Standard projects in Adobe Captivate have a persistent aspect ratio regardless of whether they are published in Flash or HTML5. Responsive design projects are always HTML5 and can scale across many aspect ratios, making them an ideal choice when you want your project to be viewed on many different types of devices.

When you publish a Flash based standard project you can use any font installed on your computer. The reason for this is that the resulting published project does not actually contain any displayed text. The text in your course simply becomes part of the Flash animation and is rendered using whatever font you have selected. For the last ten years or so this is how I have published most of my Captivate projects and until very recently I didn’t have to consider what fonts were truly available to me.

When you publish an HTML5 standard project all of your displayed text is converted into a series of images and like Flash you are free to use just about any font you wish.  The only problem with any of the standard based projects is that when they are scaled up the font quality can begin to look very poor.

One solution is to design and publish your courses using responsive design. Responsive HTML5 will use the actual fonts that are installed on your learner’s computer to render the on-screen text. Even if your Captivate project is scaled up by the user the quality of the images remains because the computer will simply increase the font size. This does have the drawback of limiting you to the standard fonts that you can expect to find installed on the learner’s device. Because of this I tend to stick with fonts that are typically installed on a Windows based PC, since that’s going to cover most of my users. The obvious choices are Arial, Times New Roman, Verdana, and so on. 

While you may feel that only being able to use such basic fonts is limiting you creatively, it’s important to remember that many of the standard fonts were designed to provide improved readability of on-screen text. Also standard fonts are great choice for learners who may have a visual impairment. Heavily stylized fonts can be difficult to read and this could create an undue barrier for some of your viewers.