Start learning with our library of video tutorials taught by experts. Get started

Creative Quick Tips
Illustration by John Hersey

How to use Font Awesome in design applications


From:

Creative Quick Tips

with Justin Seeley

Video: How to use Font Awesome in design applications

Hello there, and welcome back to another installment of Creative Quick Tips. And then what I'll do is grab my text tool, click, I've still just like so.
Expand all | Collapse all
  1. 1m 45s
    1. Welcome to the series
      48s
    2. How to send feedback
      57s
  2. 13m 45s
    1. How to find free stock photos online
      1m 55s
    2. Using the transform command in Illustrator
      4m 14s
    3. Five tools for wireframing & mockups
      7m 36s
  3. 11m 50s
    1. How to create layers from Photoshop Layer Styles
      3m 14s
    2. How to turn Illustrator artwork into Shape Layers
      3m 15s
    3. How to combine vector shapes in Photoshop
      2m 49s
    4. How to use text wrapping in Illustrator
      2m 32s
  4. 15m 41s
    1. How to effectively rotate objects in Illustrator
      2m 39s
    2. How to create interlocking shapes in Illustrator
      3m 29s
    3. How to speed up Photoshop's performance
      3m 25s
    4. How to use tool shortcuts in Photoshop
      2m 52s
    5. How to use springloaded shortcuts in Photoshop
      3m 16s
  5. 9m 27s
    1. How to create a better Twitter avatar
      3m 59s
    2. How to embed videos in WordPress without a plugin
      1m 45s
    3. How to embed real tweets into any WordPress post
      2m 15s
    4. Create your own Photoshop shortcut cheat sheet
      1m 28s
  6. 17m 53s
    1. How to create better Facebook cover photos
      4m 31s
    2. How to use keyboard shortcuts in WordPress
      2m 47s
    3. How to add Apple touch icons to your website
      5m 27s
    4. How to use Font Awesome in design applications
      5m 8s
  7. 8m 50s
    1. How to create your own pixel grids
      4m 25s
    2. How to sample colors from anywhere
      2m 5s
    3. How to create diagonal guides in Illustrator
      2m 20s
  8. 13m 48s
    1. How to round individual corners on Illustrator shapes
      3m 21s
    2. How to use Camera Raw as a Smart Filter
      4m 8s
    3. How to use the Shape Builder Tool to recolor artwork
      3m 34s
    4. How to use "Align to Key Object" in Illustrator
      2m 45s
  9. 8m 26s
    1. Exploring the Kuler Panel in Illustrator CC
      1m 50s
    2. How to draw awesome shapes with the tilde key
      2m 12s
    3. How to reset your bounding box in Illustrator
      2m 6s
    4. How to change your artboard color in Illustrator
      2m 18s
  10. 23m 19s
    1. How to use Photoshop and Illustrator to write CSS
      4m 1s
    2. How to create scalable rounded rectangles in Illustrator
      4m 16s
    3. How to use the fill commands in Photoshop
      3m 52s
    4. How to accurately space objects in Illustrator
      2m 5s
    5. Ten WordPress plugins that you should know
      9m 5s
  11. 9m 41s
    1. Unlocking background layers in Photoshop
      1m 8s
    2. Using opacity shortcuts in Photoshop
      1m 50s
    3. Using Illustrator's Glyphs Panel for icon fonts
      3m 15s
    4. Creating flexible buttons in Illustrator
      3m 28s
  12. 6m 31s
    1. Locking artwork in Illustrator
      2m 5s
    2. Five free fonts for your next project
      2m 0s
    3. Improving the SEO of your Muse website
      2m 26s
  13. 17m 7s
    1. Fitting content into your InDesign frames
      2m 37s
    2. Setting up your own Autocorrect in InDesign
      2m 33s
    3. Drawing complex shapes in Illustrator
      3m 14s
    4. Using the snapshots feature in Photoshop
      4m 40s
    5. Creating awesome product shots with Placeit
      4m 3s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Creative Quick Tips
2h 38m Appropriate for all Aug 05, 2013 Updated Jul 21, 2014

Viewers: in countries Watching now:

Join Justin Seeley, lynda.com staff author and design enthusiast, each week for a new 5-minute, self-contained tutorial that you can use to instantly improve your design workflow. This series covers techniques for print, digital, and web design, addressing the tools that creative professionals like you use most. Learn new ways to leverage layer styles and vector shapes in Adobe Photoshop, work more efficiently with text in Illustrator, and embed videos and even tweets in WordPress posts, and much more. Check back each week for a new installment, and a new design hack.

Subjects:
Design Web Design Techniques
Software:
Illustrator InDesign Photoshop
Author:
Justin Seeley

How to use Font Awesome in design applications

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.

Find answers to the most frequently asked questions about Creative Quick Tips.


Expand all | Collapse all
please wait ...
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creative Quick Tips.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.