1.5 Font Awesome

Welcome back to the course. In this lesson, you'll learn how to work with Font Awesome. This is probably the most popular icon library out there. And because the icons are delivered as a font file, it's really easy to work with. Let's check it out. You can find the library at fontawesome.com, I'm sure you've used this before. Or at least you've heard of it. And there are two options. You can use it for free with a limited number of icons or you can go Pro, which is obviously a paid version of the library. It costs $100 a year or 99 a year. But you get a lot more with it. You get way more icons. You have additional icon styles and more page views and etc, etc. Now, let me show you how you can work with Font Awesome. The recommended way is to create an account and create a kit, okay? So I'm gonna sign in, and once you're logged in, you can go right here to Kits. And as you can see, I have a test kit opened up here but you can create a new kit if you want to. And my test kit is using the free version of Font Awesome. And if I go to Settings, I can always switch from Free to Pro if that's what I want. Of course I need to pay for it. And I can choose to switch between a web font or an SVG. Now, what's the difference between these two? Well, web fonts work with CSS, SVGs work with JavaScript. The SVG version of the platform enables features like power transforms, masking, layering, counters. We'll actually demo some of these later in the lesson. The web font is easier to use. And it's probably the option that most people will go for. So for now, let's choose Web Font. You can choose which version of the framework you wanna use. And then you can go ahead and save your changes. Now once you did that, you can go ahead and copy this script, and then you'll need to go back to your page and you can paste it right here in the head of your documents. And from here, you are ready to start using Font Awesome. So let's see some examples. I have a simple demo page prepared here with four containers and I just added some simple styling to them. Now, in container number 1, let's add a couple of icons. You do that by using an i with a class of fas for Font Awesome and then the class of the icon that you want. And to find the class of the icons, you can go to the Font Awesome website > Icons, and you can search for a specific icon here, or you can browse using these filters. I'm gonna choose Free and maybe Solid. And let's choose this address book for example. I'm gonna click on it and this takes you to the Icon page. It gives you all the information you need, including the HTML for it, so let's click that and copy it. You can also download an SVG version of this icon. And since we're here, we can also check out the other styles for this icon because most icons come in a variety of styles. You have solid, which is free. Regular, then you have Light, which is only for Pro users. And Duotone, which is also for Pro. But we're gonna choose Solid. And by the way, you can also determine what kind of style you're using by the class name. So fas stands for Font Awesome Solid. Far stands for Font Awesome Regular. Fal for Light. And Fad for Duotone. We're gonna choose Solid. So again, copy this. We're gonna paste it in. And now, just like that, we have an icon. Let's add a couple more icons. And I have a list written down here. We're gonna do fas, fa baseball, like so. And then i want to call some fas, fa camera retro. All right, so now we have a nice collection of icons. Now, let's talk about sizing these icons. You can do so with specialized classes, for example, fa-xs. Okay, that's the extra small. Baseball, we'll just keep it at default. The camera, we'll do fa-2x, and that's twice the size of the normal icon. Let's do fa-3x and let's do fa-10x, right? So we have icons from small to very large. Now you can also change the the size of an icon by changing its font size. In this case, let's do a quick demo in line style, where I'm gonna set a font size to let's say 200% on this baseball, right? And as you can see, it just got bigger. But where possible, you can use these dedicated classes, and there are a lot more classes than this. If we go back to the documentation, and we open Sizing Icons, you can see that we can go from xs to sm, lg, 2, 3, 5, 7 and 10x. And then you can also see all the details in this nifty table right here. Now, how would you go about coloring these icons? Well, let me show you another example. I'm gonna include some more icons here. These are just some arrows, which currently look like this. But what if you wanna make them each a different color? Well, it's easy. We're working with the web font right now. So all we have to do is change the text color. So we're gonna reference this fa-arrow-right and we can do color. Let's say for example, 82bbc. And there we go. And we can do the same for the rest. I just added color to the arrow down and arrow left. And they currently look like this. Now with Font Awesome, you can also rotate and animate those icons using predefined classes. So in this third container, I'm gonna do the following. I'm gonna add a couple of icons. All right, so I just added the same icon actually three times. And I'm gonna show you some interesting classes. You can do a rotation using fa-rotate-90, for example, and it's gonna rotate it 90 degrees. You can flip it using the class fa-flip-horizontal and that's gonna be reversed. And it can also flip it both axis. So, fa-flip-both, and now it's upside down. Make sure you check out the official documentation to see all the available classes for a rotation. But what about animation? Well, you can do that as well simply by using a couple of predefined classes. So you can do for example or you can use a spinner icon which looks like this. And it can do fa-spin, and that's gonna spin it. And you can also do fa-spin and fa-pulse. And pulse will basically create these animation steps instead of just animating fluidly like this. And of course, we can animate any icon, it doesn't have to be a spinner. So for example, I can use the class of fa-compass for example, let's do twice the size. And I can add fa-spin to it and that's just gonna rotate it nicely. Now for the final demo, I'm gonna show you some more advanced features of the framework and we're actually gonna switch our platform to the SVG plus JavaScript version, okay? Now first, for the markup, we're gonna create a simple menu bar, and we're gonna layer some icons. And layering in Font Awesome basically means just putting one icon on top of the other. And on this first icon, we're also using advanced feature called counters. This basically displays a little bubble on top of your icon, displaying number or text or whatever you want. Now currently, this looks something like this. So let's add some quick styling to that. So menu bar, I'm gonna remove the list style and also the margin and padding. And then, I'm gonna target each list item, I'm gonna add a simple background to it. Let's do black with a 0.25% opacity. Let's do a bit of padding, 1.5rems. Margin-bottom, 1px to kind of separate the list items and also cursor pointer. All right, so we're starting to get there. Now to enable the layering feature, I'm gonna go back to my Kit > Test Kit > Settings, and I'm gonna choose SVG. And then I'm gonna hit Save Changes. And I'm gonna do a refresh of my page. And there we go. Of course, the rest of the icons still work, no problem. But now, the layering is enabled. So I have this nice counter setting on top of that icon. Finally, let's add some nice hover effects. But actually before we do that, let me show you how the icons are rendered now. If we do an inspect, you'll see that that i with a class of fas has been replaced by an inline SVG. So these icons are now rendered using SVGs directly in your page, which is fantastic. All right, let's quickly add some hover transitions or some hover styles. We'll say menubar, list item hover, and we'll target everything. We'll target the i, we'll target the SVG, and we'll target the fa layers elements. And I'm just gonna say transform. Let's do a translate 3D. Let's move it to the right by 4px 00. And now, we just have to do this, menubar list item, and I'm gonna just select everything for the sake of this demo. I'm gonna add a transition to it. Transform 0.2 seconds ease in-out. All right, so with that, we've just added this nice transformation on hover. Now, before we wrap up this rather lengthy lesson, let me just quickly mention the current debate that's going on regarding SVG versus fonts, when it comes to icons. And in the lesson notes, you'll find a very interesting blog post on the subject and I strongly recommend you read that. Essentially, more and more developers are starting to lean towards SVG icons nowadays. Because they are more accessible. In terms of performance, they do perform a little bit better than icon fonts and they are much more scalable. Now, fortunately, Font Awesome gives you the option to use either a web font or the SVG alternative. So personally, I would go for SVG every time, but it really depends on your project and how comfortable you are with working with SVGs. But go ahead and check out that article and read more about this topic, they really break it down and give you a lot of useful information. All right, and that's a, well, not very quick look at Font Awesome, but hopefully, very informative one. This is one of those CSS libraries I always find myself reaching for because it's really easy to use and the icon collection is massive, and it's free. Now, our next library is used for creating responsive typography, and it's called RFS. And that stands for Responsive Font Size. Let's learn more about it in the next lesson. See you there.