Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 12 – Using Font Awesome Icons with Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

So the next font related item we’re going to talk about using on a Thesis 2 website is FontAwesome. FontAwesome is essentially a set of icon fonts. I don’t actually remember how many there are. It’s something like 400 different icons that you can use for various things.

In this case, we’re going to use them for social media icon links. They’re nice because they scale, they’re lightweight and you can change your color. You can do all kinds of things with them.

Why They’re Better than Images

They’re better than images because they don’t require multiple http requests and, in fact, advanced users can even customize the number of these things that show so your font weight load can be even lower. It’s actually extremely easy to use.

Where to Add the Code

It starts off with this Get Started thing here. Again, you put this link in the head of Thesis again. So you come back over to HTML Head, and open up Head Scripts, we’ll leave the TypeKit in place, but we’ll drop font-awesome.css in there as well and save that.

Let’s take a look at their examples so you can see where to use it. All you do is add this “i” with the appropriate class. So for example, let’s look at the icons. There was a coffee cup in here some place, fa-coffee. Icould just do this, opening i class=”fa-coffee” closing i.

Then all I have to do is come over, let’s open the page, let’s delete that and go to the text field. Immediately in front of that, I can say i class=”fa-coffee”, update it, view the page and now we’ve got a little coffee cup sitting in that place.

Configure Width, Spacing and Size

Now, I can easily give myself a little bit of space because FontAwesome actually comes with the ability to add stuff like that. So, I can give it fixed width that is this “fa-fw”. i class=”fa-coffee fa-fw”. Let’s add that class, fa-fw to it. Refresh it and now I have a little bit of space that’s added to that.

I could also just target this in CSS. So I can give more space. I can enlarge it by looking…there are a variety of ways to enlarge it. I could add “fa-lg” which could make it 33% bigger or “fa-2x’ which makes it twice the size, so on and so forth. So, if I just say i class=”fa-coffee fa-fw fa-lg”.

Rotate and Change Color

So I have fa fixed width, fa large, update that, refresh it, I get a bigger coffee cup. I can also move it around a little bit. For example, I could turn the coffee cup updside down. In that case, you’d just use “fa-rotate-180”, i class=”fa-coffee fa-fw fa-lg fa-rotate-180”. And now the coffee cup is upside down.

I could also change its color. Now, we know its class is fa-coffee so I could just say fa-coffee and I’m going to my custom css, and come down here, .fa-coffee color. Let’s just make it red .fa-coffee color:red. And now it’s red.

Apply Text Shadow

Actually, I think I’m going to turn it right side up. I can also apply other things to it. I can apply text shadow to it. I could come back to this text shadow, text-shadow:1px 1px 1px rgba(0, 0, 0 ,3 ). I’ll just grab that text shadow property and add it to the menu. And add it to the icon.

Create a Bulleted List

Now I’ve got a little bit of text shadow there with that. So there’s quite a bit that you can do with this. In fact, one of the things you can do here is create a bulleted list. Well let’s see, let’s edit this bulleted list. So if you’re creating a bulleted list, you can easily just say, take that li and stick it directly in front of a text.

Let’s come over here to our Edit Page and we’ll just put it in like that.. View the page. Oops, what did I just do? Okay, I’m doing something that’s wrong here because it works just fine ordinarily. Let’s look at an example one more time here, they have an example list icons… oh, that’s what I’m doing wrong here. I need the “fa-ul”. I’m sorry, my mistake. So in the edit, class equals none and then fa-ul, let’s see what happens then. Perfect. Okay.

Let’s get rid of a none and let’s see what happens here. Yeah, so what it does is it replaces the bullet with the little icon.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment