Grow your business, income, & life.

Behind-the-scenes training to grow your business and generating income. Strategies and mindsets that work.

CSS3 Tutorial for Beginners: 15 Using Bootstrap Font Awesome Within Your CSS Code

This is Sasha and welcome to another CSS or Bootstrap tutorial. Today, what I’d like to do is share with you how to use font awesome within you CSS. The great thing about font awesome is you can really power it to create some really unique bullets using in navigation menus. There’s a lot of great benefits to using font awesome because it’s really all about the icons. Let me take a look and show you what it’s all about and give you some examples.

Installing Font Awesome

In order to install font awesome or have it be on your web browser, what you ultimately need to do is go into Google and search for “font awesome embed code” and the one that I use is – there’s this bootstrap one, because it’s bootstrap based. The font awesome was initially designed for bootstrap and we just take this part right here so this is they’re CSS code.

We take it and we copy it to the clipboard and then we add it just like we would any other stylesheet. Now, you notice I don’t have a lot of items in this page because that’s all my page is and I really don’t even have any CSS right now. But here the cool part about this CSS is if I wanted to create custom bullets like this one right here like this double arrow and I could say, “Okay.

This is item number 1.” There’s my item number 1 and I can go ahead and duplicate this, you know, a multiple times and there I have my bullets. Of course, you don’t really get to see it too well since I didn’t add my line breaks so let me go ahead and do that and you can see there’s a nice little bullet.

Using icons from Font awesome

One of the great things about it is look at all these types of icons that you can do. There’s things from video player things to brand icons like if you want the Facebook icon, I could go ahead and do that and pull it in there. There’s the Opera icon, Safari icon. If you’re using this in navigation menus or buttons like a PayPal button.

Let say for example, I wanted the PayPal code. Rather than creating a picture, this really speeds your website up. Let me just see here. Here’s our PayPal logo right there. Let me see which other PayPal items there are, okay? There’s our PayPal logo.

If I want to use this, I can go ahead and set this up and kind of use it like this and we’ll take this code and I’ll just show you right here, I’ll go ahead and you can see there I’ve just changed it by basically putting in the PayPal item, okay?

If I want to change it to another icon, let’s just say I want, you know, a social media icon or a heart icon for people saving it to their favorites, you know, anything like that. There’s all kinds of things. Somebody is leaving a comment so here’s a comment icon.

I’ll go ahead and I can take this and just use this right there and pop it in there and now you can see there’s a comment icon right there and these are scalable and that’s the power behind them is they don’t lose resolution and they take no time to load.

Creating buttons

You can do – the other thing you could do is you can create kind of like a button with this. Let me generate a quick little button here for you.

Here’s what I’ve done. I’ve created a sample basic button so if I wanted to use this icon or anyone of these icons, I could take one of these button codes. You could see there’s my class button and, you know, you would dictate the link such as, you know, whatever the link or the URL that you wanted to go to.

I could include like a little arrow like Click Here to Buy or if I want a PayPal logo right there. What I could do is go ahead and take this fa-PayPal, right, and just change it instead of the double right, you can go ahead and do that and you could see there’s kind of the PayPal logo right there.

If I wanted, let’s just say, something else, let’s go back and see what other payment buttons we have over here. Payment icon so I could say, “Okay. Well, why don’t we take a look at, you know, like a credit card icon, you know, something like that.” Here you could take this item right there simply pop that in here. I want to have that in there, all you need to do is just hit refresh and you can see there’s a credit card icon and you can do this for navigation buttons. I mean, all kinds of things. I mean, I’ve seen people used for podcast.

Let’s say you have a podcast right here and you can say, “Okay. Well, I have a podcast button.” You can just take the fa-podcast and drop that in there right here and the refresh it and there you go. There’s the podcast button. You just change the button text and say, you know, “Listen to my podcast!” There we go. Then we refresh and there you go, “Listen to my podcast!” There you have a nice little button. You have your icon and you can use them as bullets. You can use them in all sorts of ways and that’s ultimately the power behind font awesome.

Using icons with Pseudoclasses

You can also use it as a content before within the CSS as well. It’s a little bit different. Let me show you how that works. Here what I’ve done is pulled up the font awesome cheatsheet. Just search for font awesome cheatsheet or it’s under the icons I believe there might be cheatsheet in here. But if you just search for it, it’ll pop up in either case. Once you have it, here’s a kind of the font number or the font code.

What you want to do when you’re searching for this, this is ultimately the text that you’re doing so it’s like F047 or for the Apple one, it’s F179. What I’ll do is I can take this code and if I want to use that as a content, what I could do is create something like, let me just create a quick little CSS, so what I’ve done here is created an icon class and I put the icon for this H3 tag and I create a pseudo class for the before.

Okay? I’m refreshing this page every two seconds for the time being. Anyways, I put the content here as /F179. /F179 will be this Apple logo. It’s important that when you’re looking at this, no matter which logo you want, even if I want, let’s say, this Amazon logo instead I need just the F270. I don’t need the part. I just need that F part.

Right now you can see the Apple logo showing up so I’ll do F270 and you’ll see it here in a second it change to Amazon and there you go. It’s important also to make sure that the font family is font awesome because that’s the font family we’re pulling from and there I just have a simple H3.

What you can do is go ahead and, let’s just say, you add a padding so we’ll go top and then we’ll do a padding of, let’s say, 25 right, bottom, and left. Okay? There you go.

You can add a little padding if you don’t want the padding too much, let’s just say, you want it slight space, I might do 9 pixels and margin left, let’s say, 10 pixels just to do it a little space there and you can see there I can create bullets. If I want 7, I could do it that way. I could probably even do font size and, let’s just say, 14 pixels just as a start and let’s see what that looks like. You can see how I can shrink it down. I could do, let’s say, 34 pixels and you can see how big it is.

By just playing around with this, let’s just do 9 pixels and you can see it’s nice and tiny. By juts playing around with this, if I get rid of it, it’s kind of going to be normal for that size. The other way is 0.9 em or font size 0.9 em which gives it just a little but smaller or even 0.8 em.

I could do this and if I want to take this icon and I use it, let’s say, in the button, I could go ahead and just put it there and you could see, boom. I don’t even need this code right there because I’ve used it in the CSS and that kind of creates my button.

Ultimately that’s how you do it and how you create it in order to use these icons and you can do the same thing for like UL items. Obviously, these are just regular items, a list item, but you can do this within the ULs the same way.

In either case that’s how you do it and how you can create really great fonts and icons and use them throughout your pages and makes your website look a lot cleaner simply by using font awesome and those are the two main ways to do it, either to do the icon before like this or use it with that itag and either one, they both will work, it’s just the question of how you want it to do it and here’s how you would do it with bullets if you’re looking to use font awesome.

What I’ve done is switch to the LI code right there. Obviously, you could define it like a class, say, mega bullet so I go ahead and say mega bullet and when I do that and I’ll type in class right here in the UL, I’ll do mega bullet, there’s my class, you can see there’s the icon for the Amazon and now the other thing you need to input is the UL list style none, so you can get rid of those other bullets and there you go.

Ultimately, that’s what you have if you want to get rid of the margin left and you can shift those items and now you have kind of like a custom bullet and of course if you want, let’s just say, these nice little arrow icons or double arrow icons, you could just go ahead and change this and replace that right there and now, boom, you have those double arrow icons.