YoVDO

Creating Icon Fonts for the Web

Offered By: LinkedIn Learning

Tags

Icon Design Courses Web Design Courses Graphic Design Courses Web Fonts Courses

Course Description

Overview

Learn how to create your custom icon font quickly and easily from existing icons or your own hand-drawn artwork, using tools like Illustrator, Fontello, Glyphs Mini, and more.

Syllabus

Welcome
  • Introduction
  • How to use the exercise files
1. Icon Font Overview
  • What is an icon font?
  • Options for creating icon fonts
  • Understanding font metrics
  • Tools overview
2. Using Online Tools
  • Online font-creation tools
  • Choosing existing icons
  • Uploading custom icons
  • Ensuring consistent sizing
  • Choosing Unicode encoding
  • Setting font preferences
  • Downloading and testing custom icon fonts
3. Drawing Glyphs
  • Exploring the finished font
  • Determining units per em (UPM)
  • Setting up your workspace
  • Setting grids and guides
  • Drawing on a grid
  • Tips for drawing curves
  • Drawing consistent curves
  • Creating compound paths
  • Simplifying paths
  • Exporting glyphs
4. Creating Your Own Icon Font
  • Glyphs Mini overview
  • Creating a new font
  • Setting font info
  • Organizing glyphs
  • Adding new glyphs
  • Setting glyph properties
  • Importing SVG artwork
  • Importing Illustrator artwork
  • Controlling path orientation
  • Adding extrema points
  • Simplifying paths
  • Dealing with problem artwork
  • Renaming glyphs
  • Exporting fonts
5. Generating Web Fonts
  • Using Font Squirrel to generate fonts
  • Exploring generated files
  • Testing icon fonts
Conclusion
  • Additional resources

Taught by

James Williamson

Related Courses

Векторная графика. Adobe Illustrator CC
St. Petersburg State Polytechnic University via Coursera
Build Beautiful Icon Based Web Designs with Font Awesome 4
Udemy
Create Icons with Inkscape
Coursera Project Network via Coursera
Intro to Graphic Design: Illustrating Badges and Icons with Geometric Shapes
Skillshare
Going Beyond the Logo: Boosting Brand Identity With an Effective UI
Skillshare