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 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 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.

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.

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.

• Create Free Icons and Images in PowerPoint Using Dingbat Fonts
• Dozens of Free Dingbat Fonts for Commercial Use
• How to Create Custom Shapes in PowerPoint
• How to Create Custom Shapes in PowerPoint
• E-Learning Icons: Show and Share Your Favorite Styles #78
• Create Your Own E-Learning Characters with Pictograms #53

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 #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.