Share Your Custom E-Learning Graphics Using Free Font Icons #165

Font Icons in E-Learning #165: Challenge | Recap

One of the biggest challenges for course designers is finding the right graphics for their courses. 

While there are thousands of free resources available, designers still need to sort through the free graphics to find the ones that work best for their project.

Another option is to design your own graphics like you did for the E-Learning Icons challenge. The DIY approach works great when you have a flexible production timeline that allows for custom graphics development.

There’s also a third option: font icons. Font icons are a fantastic solution because they’re free (Yay!) and you can use them to create custom graphics without having to start from scratch. Check out Tom's recent post to learn more about converting font icons into vector graphics.

Customizing Font Icons in PowerPoint

PowerPoint 2013 makes it really easy to convert font icons into editable vector graphics. Working from system fonts like Webdings and Wingdings, you have access to dozens of font icons that can be customized for e-learning courses.

Customizing Font Icons in PowerPoint

Customizing Icons in Storyline 360

The Merge Shapes command isn’t currently available in Storyline, so you won’t be able to fragment (break apart) icon fonts like you can in PowerPoint.

If you’re working in Storyline 360, you have access to thousands of fonts in Content Library. The icons can be ungrouped which allows you to edit and customize the individual shapes.

Customizing Icons in Storyline 360

Customizing Font Icons in Illustrator

If you’re working in a more advanced graphics program like Adobe Illustrator, you can convert your icon fonts to outlines. Once you’ve created the outlines, you can modify the individual shapes to create custom graphics.

Customizing Font Icons in Illustrator

Free Icon Fonts and Resources

There are dozens of sites that offer free font icons. You can find many of those sites in Tom’s blog post.

My go-to resource is Font Awesome. Their fonts are high quality and they’re always adding and updating the collection.

Free Icon Fonts and Resources

Click to view Font Awesome

Challenge of the Week

This week, your challenge is to convert a series of icon fonts into custom vector images and share them with the E-Learning Heroes community.

Bonus: Use your icon graphics in an interaction to show how your custom vector graphics could be used in a real-world project.

Whether you share your source files or not, please let us know which font icon set you used. There’s a lot of value in seeing what you started with to create your custom graphics.

Note: When using free resources, confirm the licensing agreement and provide proper attribution. It’s always a good idea to give the original owner props or credit.

Resources

Here are a few blog posts and tutorials to help you get started.

Last Week’s Challenge:

Before you get started with this week’s font challenge, take some time to check out the amazing drop-down menus your fellow community members shared in last week’s challenge:

Drop-Down Menus in E-Learning

Drop-Down Menus in E-Learning #164: Challenge | Recap

Wishing you an iconic week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

107 Comments
Dana Kocalis
Nancy Woinoski
ieva swanson

I used Komika Bubbles Font (http://www.fontspace.com/apostrophic-lab/komika-bubbles). There are 20 conversation or thought bubbles in this font. I emailed David a PPT file with an "alphabet" image and a slide of vector images for each bubble in the font--I also posted this image to the Komika Bubbles page. I've attempted to share the PPT presentation here: https://drive.google.com/drive/folders/0B8RHT2zAEn4ybDdIWW9UeFJKUTg?usp=sharing For reference, the website and license information about the font is included on its own slide at the end of the PPT file. I slapped together a little interaction that uses the icons as buttons. There's obviously a lot of directions you can take these little assets! Fun challenge, thank you David! The demo is posted here: http://elearning-exa... Expand

Dianne  Hope
Kate Golomshtok
Tracy Carroll
Nicole Rayner
Ashi (Neha) Tandon
tested emi