Join Carrie Dils for an in-depth discussion in this video Using Font Awesome, part of Responsive CSS Workflow with Sass, Bourbon, and Susy.
- [Instructor] Earlier in the course, we added Font Awesome to our project via its CDN, or content delivery network. And in this movie, I would like to show you how to use it in our project. So there are two basic ways that you can use Font Awesome. The first is to directly embed a bit of code in your HTML, and the second is to use CSS instead. And of course I'm going to use CSS, but I'll show you both. So if we head over here to the icons, I'm going to search for the icons I want. And by the way, what I'm going to style here are these social links at the bottom of the page.
So we'll start with Twitter. So if I search for Twitter here on the Font Awesome site, I can see they've got a couple of icon versions. I'll take this one, without the square. And if I wanted to embed this directly in my HTML, I could just take that, and let's go put it right here with Twitter. And if I refresh the page there, there we can see the Twitter icon. But I don't like to do this, 'cause I feel like it clutters up the HTML, so we're going to add it via CSS instead.
And to do that, we need this Unicode, and each individual Font Awesome icon has an individual Unicode. So I'm just going to copy that onto my clipboard for now. So let's look at exactly what we're styling. We've got this navigation with a class of social-menu, and then I've got my link tag here, with a class of twitter. So heading back over to our footer, where we had started styling our navigation before, I'm just going to pick up here with a little nesting, and we'll start with an ampersand, twitter.
So when you use Font Awesome in CSS, you actually need to use the before or after pseudo class. So we're going to use the before class here, and I'm going to say content, and this is where that Unicode comes in that we saw earlier, and it needs a backslash in front of it. We need to set the font-family to FontAwesome. And finally, I'm going to add just a little bit of padding between the icon and the link.
By the way, what I just entered right here, there is documentation for that over on the Font Awesome website, if you want to learn more about that. So let's head over to our site, and refresh, and there I can see that the Twitter icon is showing up, and there's just a little bit of padding in there. Let's go ahead and inspect this, and see what's happening. So here we can see this before pseudo class, and it's got the Font Awesome, and the padding, and that little Unicode in there.
Let's go ahead and style out the Facebook and LinkedIn. So same thing, I'm going to grab the Unicode, and we'll just drop that right there for a second. Let's copy this, and paste it, and this is going to be the class of facebook, and we'll drop that Unicode in there.
And back to our site, and there we can see the Facebook icon. Finally, we'll go ahead and do the last thing, but with LinkedIn.
And if we refresh our page, there it is. So just to reiterate where I'm getting these classes from, that's our index.html, and within this social-menu, the link tag, I've got the class specified for each of those social networks. Now looking back at this, I bet you're seeing something that's a little bit repetitive, and that's this degree of padding, and specifically the font-family, FontAwesome. So the only thing that's unique here is the actual Unicode for each one of these.
So let's look at how we could use Sass to be a little less repetitive here. The first thing we can do is go ahead and pull out the repetitive part, and since it applies to the same spot, which is that pseudo selector before, then that's going to apply to all of these, it'll cascade down. So we can go ahead and get rid of those duplicates, and there, we've saved a few lines of code, which is cool. If we go save it, we can see that everything still works just fine.
So there's actually one more thing that we could do here, and that's create a mixin. So this padding-right, what if we wanted to change the padding a little bit more dynamically? We could create a mixin, and call it the font-awesome. And we're going to pass it a variable of padding. And then I would say my padding, I want it to equal whatever that variable is that's passed in.
So then if I wanted to use that here, I could get rid of this, and I could say "Okay, let's use that mixin." Let's include it, font-awesome. In this case, I'm going to specify not just padding-right, I'm going to specify the padding all the way around, so top, right, bottom, left, and I'll say zero, we'll go drastic, just so we can see it, 20 pixels on the right, zero, zero. Now let's save that and look at how it compiles. All right, so we've got our individual Unicodes for each of our social icons, and then here, on just a more generic before pseudo selector, we've got the font-family and the padding.
Now if we head over to our site, and refresh, we can see that extra padding coming into play here. And just to look in the source code here, we can see the pseudo selector is being applied with that padding of right. Now I've got to say that in this particular scenario, that adding this mixin is not really worth the lines of code that it's saving, but that would be an example of how you could use mixins to repeat a lot of excessive code.
So I'm going to go ahead and get rid of that, and we'll just go back to manually putting in that our padding-right is going to be, let's go back to five pixels. And there we go. We've got our social icons in place. It's time to move along.
- Reviewing what Sass is and how it works
- Analyzing workflow options
- Setting up a folder structure
- Adding version control
- Working with package managers
- Setting up a workflow with Grunt
- Scaffolding HTML
- Modularizing a Sass with partials
- Creating a color palette with variables
- Using Font Awesome
- Creating a mobile-first layout