Join Justin Seeley for an in-depth discussion in this video Adding Font Awesome to your project, part of Building a Responsive Portfolio Site.
- View Offline
- Images are getting ready to be a thing of the past on the web, at least when it comes to icons, because icon fonts are taking over when it comes to UI elements, little graphics that are needed to denote call to actions and things like that. Icon fonts are all the rage now, and because of the fact that they're so widespread and so easily customizable, web designers everywhere are jumping on the bandwagon. One of my favorite icon fonts is Font Awesome, which you can find at fontawesome.io. And so in this movie, I'm gonna show you how to download and how to work with Font Awesome inside of your document.
So the first thing we're gonna do is we're gonna click on this big Download button here. I'll right-click, and I'll choose to save this to a separate location on my desktop. And we'll save that down, and so once that is saved down, we've got all of that downloaded onto my desktop and ready to go. But first, let's go up here to this Get Started link. And once you're on the Get Started page, it shows you some of the basic information about getting started with Font Awesome. So you can see some of the easy ways to implement this by adding it to your head tag, et cetera. And so what I want you to do is just scroll down to where it says EASY: Default CSS.
And then just simply copy this line of code that they show you right here, and then go back into your code editor. And inside of your code editor, what I want you to do is go down to line 26 in the index document, which is included in the 01_06 folder inside of your Exercise Files. And then on line 26, what I want you to do is simply paste in that information that you copied from the website. Now, you'll notice that the path to the CSS document is completely wrong.
What we wanna do is we want to include this inside of our css folder, so what we'll do is take everything from where it says "/", right before the "css", we'll take all of that and just remove it, so that way it says "css/font-awesome.min" but we also wanna make sure that we're including it in the right folder, so let's go check out what we downloaded earlier. So what I'm gonna do is just go out to my desktop, and once I'm out on my desktop, I should be able to see font-awesome there, I'll unzip that, and once I have that unzipped, let's double-click that folder to open it up.
And you can see all of the information is inside of it, this is all of the stuff that you need to have in order to make this work, so what I'm going to do now is open up my Exercise Files folder. Inside of my Exercise Files, I'll open up 01_06. And I'm going to create a new folder called fonts. And what we're going to do is we're going to open up the fonts folder, and we're going to create a new folder and call it font-awesome. And so inside of this folder, what I'm going to do is take all of this, and I'm just gonna drag it over and place it into that folder.
And so now all of that information is now inside of the font-awesome folder. So now, what I'm going to do is I'm going to reference that folder. So I'm gonna go back into my code editor. And you can see here that we have "css/font-awesome", well, in this case, we need to make a directory reference to where it's actually located. So this is obviously not going to be just in the css directory, it's in a fonts directory. So let's go ahead and do "fonts/font-awesome/ "css/font-awesome.min.css" and let's see if we got that path correct.
So here is our 01_06 folder, here is our new fonts folder, font-awesome, css, and then there is that file. So we are referencing all of that correctly, and so all we have to do now is collapse that back up. And we should be good to go. Now that we have Font Awesome installed, let's go back over to the Font Awesome website. On the Font Awesome website, what I want you to do is go up to the top in your URL bar up here, and what I want you to do is type out fontawesome.io/cheatsheet and once you do that, it's going to take you to this, which is a gigantic reference of every single icon that Font Awesome has in it.
This is what we are going to use a little bit later on when we are building out our social media icon set that's going to be at the bottom of our webpage. So what I want you to do is just have this open and keep it open somewhere so that you have it and you can quickly get back to it later on. We're going to need some of the references to the names of these icons when we actually start including them inside of our document.
- Planning and setting up an HTML layout
- Creating responsive CSS grids
- Incorporating web and icon fonts
- Building a layout with the Skeleton grid
- Styling the website
- Using jQuery for simple lightbox effects
- Testing a website's responsiveness
- Adjusting media queries