CSS-Tricks Screencast #113: Using a Custom Icon Font

submitted by uklmhb on 09/29/16 1

As we've said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single download. But they are even more awesome than sprites because they are vector and so can scale to any size, be shadowed, change color, and more. They also look fantastic on retina displays (or displays of any size and resolution, really). To be the most efficient with your icon font, you should only load the characters that you need to load. And to be flexible, it's nice to be able to add to a single icon font from multiple sets or from any vector/SVG anywhere at all. The IcoMoon app lets you do all of this from it's super simple interface. You choose the icons you want, map them to whatever characters you want, then export the HTML/CSS/Web Fonts in a ready to use format.

Leave a comment

Be the first to comment

Collections with this video
Email
Message
×
Embed video on a website or blog
Width
px
Height
px
×
Join Huzzaz
Start collecting all your favorite videos
×
Log in
Join Huzzaz

facebook login
×
Retrieve username and password
Name
Enter your email address to retrieve your username and password
(Check your spam folder if you don't find it in your inbox)

×