Install Free Icon Fonts with FontAwesome

Brad Hussey
A free video tutorial from Brad Hussey
Marketing Consultant at FreelancingFreedom.com
4.5 instructor rating • 11 courses • 490,175 students

Lecture description

In this lecture, we learn how to download and install the free icon font library, FontAwesome, to our website.

Learn more from the full course

WordPress Theme Development with Bootstrap

Learn how to confidently develop custom & profitable Responsive WordPress Themes and Websites with no prior experience.

12:02:51 of on-demand video • Updated July 2016

  • Have the skills to start making money on the side, as a casual freelancer, or full time as a work-from-home freelancer
  • Easily create a beautiful HTML & CSS website with Bootstrap (that doesn't look like generic Bootstrap websites!)
  • Convert any static HTML & CSS website into a Custom WordPress Theme
  • Have a thorough understanding of utilizing PHP to create WordPress websites & themes
  • Feel comfortable with the process of turning static websites into dynamic WordPress websites
  • Fully understand how to use Custom Post Types and Advanced Custom Fields in WordPress
  • Allow your clients to update their websites by themselves by creating user accounts
English 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]