Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Hello there, and welcome back to another installment of Creative Quick Tips. My name is Justin Seely, and this week, we're going to be talking about how to use Font Awesome in your website designs and mock-ups inside of any application. But in this specific video, we're going to be talking about Adobe Illustrator. Now, what exactly is Font Awesome? Well, Font Awesome is an icon font that is used by Web designers to eliminate the need for using images as icons on the Web. Icon fonts make it super simple to create icons like the ones you see cycling over here on the right hand side, like books, airplanes, coffee mugs, heart shapes, whatever the case may be, using icon fonts is a great way to make sure that your page loads fast and has nice, crisp, clear icons on any screen, retina or otherwise.
In order to start using Font Awesome, what you're going to do is go to fontawesome.github.io/font-awesome. In order to download it, just click the download button. And that's going to download the font to your computer. On a Mac, what you're going to do is just navigate to wherever it downloaded to. I'll just click it to open it up. And then I'm going to jump over into my finder. And you'll see here. I'm going to go into the font folder, once I unzip that. And what you're looking for is either the true-type font or the open-type font. I'm going to use the open-type font here. On a Mac, all I have to do is double-click that, and it's going to launch my font book and allow me to install it.
On the Windows PC, you're going to move this into your fonts folder, just like you normally would install a regular font, and then you're going to click install. Once I click install, it's now installed on my system, and I'm going to jump over into Adobe Illustrator for a moment. Once I get inside of Adobe Illustrator, I'm just going to create a new document, does not matter how big or how small. And then I'm going to grab my text tool. I'm then going to click somewhere on my canvas, doesn't matter where. And I'm going to find Font Awesome in my font list. And there it is, Font Awesome.
Now you will notice that when I start typing things, it just looks like regular letters, and it actually switches back to Myriad Pro. That's because Font Awesome works like an icon font. And icon fonts are called by using these little codes that I'll show you. Here. Let's jump back over and we're going to go to another web page, fontawesome.gethub.io/font-awesome/cheatsheet, which is an entire reference sheet of every one of the icons inside of Font Awesome. You can see there are a ton of them. And out here to the right hand side are the little codes that you call them with in HTML.
So let's say that I wanted this twitter icon for instance. I could select the code, copy that, and then logic would dictate that I could come back in here and I could change this over by pasting it in. And then maybe I could also just change this to font, awesome font. So let's go up here, Font Awesome. And nothing happens. So how do you use this? A lot of designers have been emailing me like I can't use this font inside of Illustrator or Photoshop, Justin. How do I get this thing to work? Well, that's where the trick comes in so here's what we're going to do. I'm going to delete this text box, and I'm going to go back over to the cheat sheet.
The cheat sheet is the key for how this whole thing works. So what we're going to do is just find an icon that we like. Let's go ahead and just select that same Twitter icon that we had before. And I'm just going to click and drag across it just like this. Click and drag and select it. I'm going to copy it to my clipboard with Cmd + c or Ctrl + c on the PC then we're going to jump back into Illustrator. I'm going to grab my text tool, and I'm going to click to paste in and then command or Ctrl + v to paste. When I do that since I have Font Awesome set up as my font, check that out.
I'll increase it so you can see it. There is the little Twitter bird. Now, what if I had selected a different font. Well, it would show up like this. Let's just switch to Futura or something like that. It doesn't do anything. If I have another font selected, let's say I click here and I'm using Futura and I paste in, you'll get this little box figure, just like that. So whenever you see this little box figure that's okay, that just means you don't have Font Awesome selected. Just go up, find Font Awesome, change it over, and there you go. This works for all of the icons in the set.
And I've been using Font Awesome a lot in my web designs lately and I find this is a great way to create accurate mockups in a product like Illustrator or Photoshop because it makes it. So much easier to incorporate these into your designs. So let's say, for instance, that I was working on a button and this button needed to do something like point downward. I'll just grab this Chevron Down right here. I'll copy that and let's go into Illustrator for a second and I'll just draw out like a rounded rectangle. And then what I'll do is grab my text tool, click, I've still got Font Awesome as my font so I've got that same icon right there.
Then I'm just going to align these things up, just like so. I'll change the color of the icon, and change the color of the background in the icon. And there you go. There's your button that points down. Makes it super simple to create nice UI elements that are easily recreated in the browser without using images. Just by incorporating Font Awesome into your designs. It's really going to improve your page time, and really going to make your design process a lot more efficient.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 43519 Viewers
119 Video lessons · 54661 Viewers
65 Video lessons · 14840 Viewers
113 Video lessons · 83023 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.