Join Brian Wood for an in-depth discussion in this video Add your first icon font to your design, part of Making Your Site Retina-Ready.
- As you begin down the road to using these icon fonts,…there are a few things we need to gather together first.…You need to have the icon font in different formats,…which you can make yourself, or use different services,…such as Font Awesome.…You need to have some CSS to control the font,…and you need some HTML in your pages…to insert it so that you can use it.…Now luckily tons of the sites I showed you…in the last video actually give that content to you.…And you just kinda need to know where to put it.…We're gonna use Font Awesome,…just because it's one of the bigger ones out there.…
So go back to your browser and go to…fontawesome.github.io,…and I'm noticing this says fortawesome, which is great.…And what we need to do first of all is download.…Now hold on one second, there's two ways…to work with a lot of these.…Font Awesome is so big that you could download,…which I've already done here.…And what it'll do is if you do download,…why don't you go ahead and do that, click download.…Go to the download folder,…
- What is HiDPI?
- Adding your first icon font
- Adding hover states and animation
- Working with SVG files
- Creating favicons
- Displaying HiDPI images
Skill Level Intermediate
Creating Icon Fonts for the Webwith James Williamson3h 56m Intermediate
Design the Web: SVG Rollovers with CSSwith Chris Converse23m 47s Beginner
Design the Web: Using Symbols in SVGwith Chris Converse20m 31s Beginner
Photoshop and Illustrator: Creating Retina Graphicswith Justin Seeley1h 11m Intermediate
1. Introducing HiDPI or Retina
What is HiDPI (retina)?9m 16s
2. Icon Fonts
5. HiDPI Images
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.