1. Web Design
  2. Icon Design

New Course: Mastering Icon Fonts on the Web

Scroll to top
Read Time: 1 min

Let’s say you’re building a website that uses lots of icons. How would you implement those on the web? As image files? They worked fine in the past, but not any more; not with retina displays and responsive websites. Icon fonts are the way to go, and in Mastering Icon Fonts on the Web you’ll learn all there is to know about them: what they are, how to use them, and how to make your own.

What You'll Learn

Tuts+ instructor Adi Purdila will teach you all about how icon fonts work, including things like accessibility issues, their effect on loading performance, and browser support. Then you'll jump into building an icon font, going through the process from choosing the software through designing the icons and finally building the font itself.

Here's a free preview of some of the lessons from this course:

How Icon Fonts Work

Using icon fonts might seem difficult, but it’s not really. In this lesson you’ll learn how to embed fonts and use them within your HTML and CSS.

CSS Control

How well can you control SVGs in CSS? How about icon fonts? In this lesson you’ll get the answer to both of these questions.

Designing the Icons

The first step in building an icon font is designing the icons. That’s what you’ll be doing in this lesson.

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.

Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.