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 in a Genesis Child Theme

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Next up in this seminar on customizing the Genesis Theme, we’re going to take a look at using Font Awesome. This is different from some of the fonts we’ve looked at so far.

Collection of Icons

Font Awesome is a collection of icons. Let’s take a look, you can see it’s a collection of icons that are created as fonts. And all of these little icons here are all icons in Font Awesome.

Hosted and Self Hosted Fonts Available

Now you can host these yourself or you can let Font Awesome host them for you. There’s just all kinds of fonts here which is great. It’s also really, really easy letting Font Awesome host it for you.

Add Link to Head Scripts

Let’s come over here to Get Started. All you have to do is take this link, copy it, again come back over to your head scripts, come down and it’s good on the bottom. Paste it in there. So there is the reference to it. Save your settings and now, all you need to do is use it correctly.

Adding Icons

Let’s close MyFonts and look at Examples. We can start off by using Inline Icons. For example, we’ll use an Inline Icon and it starts with i class and then this class actually gives you the specific icon to use. So let’s come over and look at our icons and let’s use fa-bookmark. If you just want to add it all you have to do is come like this, grab thati class=”fa fa-bookmark” with a closing i.

Come back over to our page here and we’re going to edit this page. Now instead of the image, we’ll just add the icon like that. View the page and there’s the icon. Now, we could either add a little bit of margin here or there’s actually a style that comes with these things that will give you automatic spacing and that style is this fixed width.

All you have to do is add this class “fa-fw” to set up. Well, it gives it a fixed width and therefore gives it some padding. So we’ll use “fa-fw”. Come over to our page, edit the page and all we have to do is add that to the class. View the page and now we’ve got a little bit of space there.

Use of Classes to Change Font Sizes

Now, if you want this to be larger than it is, you have some tools. You could always just define the font size for that, right? You can always simply use CSS to change the font size but you can also change the font size by using these additional classes.

So, “fa-lg” increases it by 33%, “fa-2x” doubles it in size and all of these are relative to the parent size. In this case, the parent size is 16 pixels so that’s how big it is right now. If you added “fa-lg” that’s going to make it 20 pixels tall or a little bit bigger than that.

Customize Icons Just Like any other Font

You can do anything with this that you can do to a font. For example, we could change its color. Let’s just edit this page and let’s say “fa fa-bookmark” and come back over to our custom styles. Come down below this and paste that class, .fa. And because they’re both referring to the same element, it would be .fa .fa-bookmark

Add Drop Shadow

And then let’s give this drop shadow right here or text shadow, right? Save the custom CSS, view the page and now you see it’s got a little bit of drop shadow.

Change Color

Let’s say we want to change the color of the icon font to this color of blue in it. So get the color and let’s copy that. We’ll just come back over to this and say, fa-bookmark color, add the color. Save our custom CSS, refresh it and now we’ve got our little bookmark with the color of blue.

Rotate the Icon

There are other things you can do with this as well, right? We could also rotate them which will be kind of funny. This is rotate 90, I wonder if you can rotate less than 90? Let’s try that. First we come over to here and edit the page. We’ll add that class “fa-rotate-90” and now the thing has turned sideways. Let’s see if we can rotate it 45. I haven’t ever tried that before. No, that doesn’t work. Okay, so you have 90, 180, 270 and normal so you can rotate these if you wish.

Replace Bullets with the Icons

Do we have anything with bullets in it? You know, I don’t think we do have a bulleted list anywhere. Well, let’s add a bulleted list to this so I’m just going to copy that little bit of text and then go to visual view. Paste it, paste it, paste it, paste it and then select all those and make it a list, update.

Okay, so now we have a list with those little bullets in it. Well, let’s replace those bullets with one of these fonts and the way you do that is to add “fa-ul” to the list. So ul and it’s going to be class=”fa-ul” and then you add your icons in then. The icon starts off with “fa-li” and then “fa”.

So we could just do this everywhere, the little check mark and just add that in the front of these and what it’s going to do is replace those bullets with those check marks. Obviously I screwed something up, I have an extra closing bracket. Okay and now you’ve got those little checkmarks and you can change them up, right? You can just pick any different ones of those to add bullets to the list.

Next I’m going to show you how to create Social Media Links with Font Awesome Icons.

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