Install Free Icon Fonts with FontAwesome

Hey everybody, welcome back to Boost Your Income with Bootstrap to WordPress. This lecture is called Installing Free Icon Fonts with Font Awesome. [MUSIC] Okay, so in this lecture, we're gonna install something called Font Awesome. If you don't know what Font Awesome is, it is a font that let's you use icons. So your icons are vectors so they are not blurry like bitmap graphics or actually vectors. So this is the Font Website. Fontawesome.io and you can scroll through and check it out, if you'd like, but we're gonna only be using a couple of these icons. But basically, you can see here, we have a whole bunch of icons that you can use in your websites and your web applications and they're fonts, so they are infinitely scalable and they'll always look sexy on your websites or on your global applications or whatever you use them for. So to go ahead and download those, you can head to the home page here and hit Download. The version that I'm downloading is 4.2.0. And just to show you here, in your course files folder that you have downloaded awhile back, in the assets here of the Final static website, assets. If you go to CSS, you'll see a folder here called Font Awesome and then there's a couple folders in there. That's what we're gonna be installing. If you wanted you could just drag this Font Awesome folder right into your CSS folder in your static website that you're building right now. But, what you might wanna try doing is just downloading the most recent version. Remember that I'm using 4.2.0, so if you every come across any bugs it's probably because you are using a more up to date version. So i'll leave that to you to do some bug fixes. Otherwise if you don't want to go through that hassle, just make sure you are using 4.2.0. And I have that version like I said right here in my CSS folder of the course files folder. Okay, so I've downloaded that here. I'll show you. Font Awesome zip file, go ahead and unzip that. And just for readability sake, delete the version number. It just looks a little bit easier on your eyes 4.2.0 you don't need that. And in your static site that you're building right now, drag that folder into your CSS folder. So, Font Awesome. Go ahead and drag that right in there, cool. So now you have a few folders in here. There are a couple of things we don't actually need less and SCSS. Those are a couple CSS languages that we're not gonna be using right now in this course. We're just gonna be using CSS and font. So just go ahead and wipe those out. All right. Now we have everything we need. And we'll need to go to our code editor and create a reference to those, to that folder. So that we can actually utilize our icon fonts. So here it is in our CSS folder, Font Awesome. You probably already know how to do this. Just go ahead and add a link tag here, href and it is in your assets folder css/font-awesome. And you're gonna need to reference the CSS itself here, so let's see what that's called. So there's a CSS and a fonts folder, we need to make references to both of those. So we have Font Awesome CSS and min.CSS. Let's just use min because it will take less time to load. Css/font-awesome.min.css, and let's put a rel attribute there for stylesheet, cool. All right, and I'm just gonna put a HTML comment up here just so I can know what this is all about. Font Awesome Icons. So, yeah, this is all you need to do to add your reference to your Font Awesome. There is in the Font Awesome folder, you can see there's a Fonts folder. So we might wanna make sure that the CSS is referencing this Fonts folder correctly, because that's why this is here. Our CSS Is going to look for this font's folder in order to serve up those fonts or those icons. So let's just open our Font Awesome CSS. All right, so it looks like here the source URL is looking for fonts. So we're going up a directory, jumping down into fonts, Font Awesome web font. We're here in CSS, we're jumping up a directory, and then down to fonts. It looks like this is perfect you don't need to change this at all. And again right here we're using min.css so if you are gonna make any changes, make sure that you make changes to the min.css or if you do it to the CSS compile it to a minified version. And just to show you what will be using those the Font Awesome icon font four. Right here, these little social icons Twitter, Facebook and Google Plus. These are actually icon fonts, they're not graphics, I didn't use Photoshop or download them at all. This is actually, these are fonts, so if you had your font size really large those would scale and you can still see here, I'm zoomed really disgustingly far in, these things are still sharp, that's because they are fonts and not actually bitmap graphics. All right. So that's it for the icon fonts for installing Font Awesome. Don't you dare go anywhere, because in the next lecture I'm going to show you how to add the type kit and Google Fonts libraries to your website so you can use some sexy fonts. See you there. [MUSIC]