Join Brian Wood for an in-depth discussion in this video Use icon fonts in different situations, part of Making Your Site Retina-Ready.
- View Offline
- Lots of these types of, well, I guess you could call 'em sort of like icon foundries, Font Awesome, for instance have built-in styling for the icons that allow you to do things like add them to lists, be a part of a button, spin, change sizes, colors, and much more. Icon fonts aren't limited to social media, but we can use them in different positions or places throughout our page, like right here for a Download button, for instance. Now in this video, I want to explore adding them to different places like a list.
How to spin them, how to add small types of animation that are built into the font, change colors and sizes. So make sure that you have the Font Awesome website open here, and click on Examples up top. If you scroll down, you're gonna see that after we get started and we attach the css file to our page, we went through and we pasted this in a previous video, so this is the initial icon that we can put on our page. Scrolling down, you'll see that there are some other ways we can work with the icon.
We can make them larger and smaller, we can use fixed width, but you'll notice that a lot of these fonts actually have separate classes for a lot of this that we can apply to the i tags, or however we do it. What we're gonna do is we're gonna make our icon a little bit bigger, so, you'll see fa-5x. Go over to your text editor, and make sure you've got the page open here, and you can see, we've already got the link to the cdn there. Scroll down, and you'll see that we have the i right here, the i tag with the, I've got fa-train.
You might've done something different in the previous video. Go ahead and put a space, and we're gonna type in fa-5x, and that's gonna make it basically five times larger than the original size. Go ahead and save it. Go out to your browser again. Let's go ahead and open up a new tab, and we're gonna open that in there. So I'm gonna drag in my 02_03. Open it up, and you'll see that it's pretty big now, okay? And not only can we use some of the custom classes that they have for us, you saw a bunch of 'em, but we can also generate or create our own styling if we want to, and we'll show you that or go through that when we add them to lists next.
So, I'm gonna scroll down the page here, and you can see that we've got a list down here, it's an unordered list, and I want to just add icons to the front of each one of these. If you go back over to the Font Awesome site, scroll down, you'll see that we have what are called List Icons. Basically, we add a class to the unordered list, and then we add these i tags in front of the content for a list item. So let's do that first, so we're gonna say class="fa-ul". So you go back over to your code, your page, and you're gonna find, you scroll down a little bit, you'll see the unordered list here.
Go ahead and put a space in there and type in class="fa-ul". Basically just saying this is an unordered list. That's kinda setting things up for us. So I'll save that. Next what we're gonna do is we're gonna assign one of those i tags. So if I go back over, it's easiest if you want to just copy this stuff. So if you select from the opening i tag to the closing i tag right there, you can copy that. Go back over to your page, and right in front of the content for the list items, I'm just gonna paste it in there, and there we go.
You're gonna see there's a couple special things here. We have the fa, which is an initial styling, which gets things set up for us. Then we have the "fa-li," which does some different thing as far as positioning the bullet or this icon that we're putting out here. And then we have the actual check-square, which is the content, that's the unicode character that it's putting in here. So if you save this, go out to your browser, refresh your page, you should see it happen. There we go.
Now, you'll notice that the rest of the bullets are gone. That's good, it's taken care of by the Font Awesome CSS that was there, and now we have this check mark. Now, if you go back over to your page, the one thing I do not like about this is the fact that they expect you to go in front of every single one of these and insert this code, which is kind of annoying, okay? And it's actually not best practice, I gotta be honest because if we had a listing of 100 things, to paste this in every time is super annoying and actually really bad form.
So we're gonna do this a different way that's a little bit faster. What I want you to do is leave that out there, go back over to your browser, and you should see that it's still on your page. I'm gonna go into the Web Developer Tools for Chrome, and if you have a different browser you can find them in there. In Chrome, it's actually under here, you can see Developer Tools, all browsers have these. Developer Tools, if you haven't used them before, are great because usually there's a little like inspect thing, you can go out and click on something and inspect it, and what that does is it shows you the html code and shows you the CSS assigned to it.
Now, we have a couple of styles assigned to this that we need to, I guess you could say work or do something different with. So what we're gonna do is we're gonna delete the i tag itself, and we're gonna use just a style to get this done. If you go back over to your page, take that i tag right there and go ahead and delete it. Go ahead and save your page. Get into the main css file, and what we're gonna do is this css for the page, you can see that we have what's called .icon-center.
Go beneath that and go ahead and hit return, and we're gonna put our own style in there. The style's gonna look like this. It's gonna be .fa-ul li:before, and let me just describe what this does. This is basically the unordered list. We're saying grab a list with fa-ul as a class assigned to it. Go to each li, and before the li, we're gonna add some stuff or do some formatting. So what we're gonna do here is we're gonna add the content. So first of all, we'll say something like font-family: and we'll do FontAwesome.
The reason why we're having to do this ourselves, this is what the css for Font Awesome usually does is because we're not gonna assign those classes to the list items, to that i tag. So we got the font family, now we're gonna assign the content. So essentially what we're doing is we're saying before this thing, I want you to put in some content that looks something like this. This is the unicode character that you can copy from the Font Awesome website. Let me put that in there, there we go. I'm gonna save this, and if we go out and take a look at the page and refresh again, you're gonna see that it's pretty much doing what we just told it to do.
It's going in, and if I go to inspect the element here and click on each one of these, you're gonna see it's going okay before each list item, before it, it's got a font-family, it's got this content, the unicode character that it's throwing in there, but what you can do if you want to is if I go back to the examples here, scroll up, and go back to the Icons page, you can grab a new icon for lists, so we can even go in and search icons, maybe they have a search for lists or something like that. Yeah, well, that's kinda weird, anyway. So you can go out and just grab an icon you want.
So I can say, hey, let's grab a bullet or an arrow or something like that, so let me go ahead and type in arrow. I'm spending too much time on this, and I'll say great, arrow-right. I'll click on that, and it's called fa-arrow-right. The unicode character is right here f061, so I'm gonna copy that. Copy the unicode from the one you want. Go back over to your code and just paste that in here instead. Nice. Now we need to position it, kinda move it around a little bit, it looks pretty bad. So in order to do that, we're gonna use what's called positioning and add a left, a width, et cetera, some different things.
So, if I type in position: absolute, we're gonna do some absolute positioning, and we'll give it an actual position. Say left:, now you can get pretty crazy with this and get pretty precise 'cause they have in their css, Font Awesome has, but we're gonna make it a little bit simpler. And we'll say something like the width is gonna be 2em. From the left, it's gonna move it to the left, and then from the top, we want to move it down just a hair 'cause it's hanging up a little bit, so we'll do like .12em, and we also want to align the text to center.
I know we're doing a lot here, but once we get all this in, I keep doing that, text-align:center; there we go. So we're saying, take this content, position it absolutely on the list, move it to the left -2ems, move it left. Make sure the width of it is 2em, and down from the top .12 and the align center is set. Go ahead and save this. Go take a look at it. Go back to your page and refresh, and there we go. Not looking too bad. You can, if you want to, go and look at the css that they used, if you use the dev tools and copy/paste from there.
They have numbers, which are a little bit more precise, but this is something we can do, pretty cool. Now, another thing I wanted to show you is how to do things like size these, how to do things like spin them and all kinds of crazy stuff. If you go back over to the Font Awesome site, and go to Examples here, and then scroll down. We talked about doing larger/smaller. We could also, if we want to, create our own class and assign a rem or an m value to the size.
You can do that too if you want to. There's the List Icons. We can also animate icons, this is kinda neat. All it is is this fa-spin class. So go back over to your page, go to your html, scroll up, and come to this icon here, the train, and just put in fa-spin. That is it, a space with fa-spin. It's gonna pull some wonderful css magic. Save your page, go back out and refresh, and you're gonna see your train start to spin.
Now just by doing this, we are not gonna stop that from spinning. We could assign it on a hover state, we can do a lot of things. We're gonna do a hover in the next video. You can also rotate and flip, and each one of these just happens to have a separate class, which we could do ourselves if we wanted to, but this is pretty much it. There's tons of things we can do here. If we want to do things like change color, we could also go in and create our own styles, matter of fact, I want to change, let's say the color of the icons down here, the list icons.
We already have a style for that, so, if you go back over, go to your css file. We've got this style right here we just created, we could go in and say, "Let's change the color." It's a font, so I can go into color and maybe do some kind of obnoxious red, something like that. Put in whatever color you want, RGB, RGBA, et cetera. I'll save it, go out to the page, refresh, and there we go. It's all about creating a style that you can use to override what they said. Now, I do want to make sure that we understand, if I go back to the html page here, that the main style sheet is here.
You can see if you start putting in content in your main css, which we've been doing some styling, it may not override the Font Awesome styling because it comes before in my case, or in our case. So you gotta be aware of that. All right, I'm gonna go back out to the page here. The next time you find yourself considering whether an icon font would be useful in certain situations like a list like this, for instance, remember that they can do an awful lot, and these are just things that are built in to the icon fonts as styling. Like I've mentioned previously, icon fonts aren't the only answer, SVG being another, but they are one of 'em.
- What is HiDPI?
- Adding your first icon font
- Adding hover states and animation
- Working with SVG files
- Creating favicons
- Displaying HiDPI images