Bootstrap Tutorial – Font Awesome & Social Icons (Video)

In this installment of our Bootstrap tutorial, we show you how to install Font Awesome and add social icons to your website’s footer.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. The font was designed from scratch to be fully compatible with Bootstrap 3.0.0.

Video Transcript

Hey everybody. This is Christopher Gimmer from BootstrapBay.com and welcome to the fourth installment of our Bootstrap 3 tutorial. Today we’re going to install Font Awesome and add some social media icons to our footer.

The first thing we’re going to do is access the Font Awesome website. If we just Google Font Awesome it’s the first result. If we click on icons, it will show you the 369 different icons that are available. There’s all kinds of different categories and if you go down to the end you’ll see brand icons. This is where you’ll see some of the social media icons.

If you click on Facebook, it gives you the code to add to your HTML. If you click on ‘Example’, there are different variations. You have your inline icons, your larger icons, fixed width, list, spinning icons, and rotated. There’s a whole bunch of different styles that you can incorporate.

Once you’re ready to go click on ‘Get Started’. Now here there are different ways that you can install Font Awesome. You can actually download it and customize the LESS but what we’re going to do is just copy and paste this line of code into our header. That’s the easiest and fastest way to get started with Font Awesome.

Once you’ve copied it, go back to your HTML editor and add that line of code to your header. Now one thing to mention is that if you’re developing locally and you’re not on a hosted server, you’re going to have to add HTTP: for this to work.

Now that we’ve actually installed it, let’s go ahead and start adding the icons. Continuing with our footer, I’m going to go:

<div class="navbar-text pull-right"></div>

Now I will actually add the icons:

<a href="#"><i class="fa fa-facebook-square"></i></a>

So now if we go to our preview, we’ll see the Facebook icon, but you’ll notice that it’s pretty small. So what I’m going to do is increase the size by adding “fa-2x.” Now you’ll see that it’s quite a bit bigger. Now I’m just going to add a few more:

<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
<a href="#"><i class="fa fa-google-plus fa-2x"></i></a>

You guys can add whichever ones you want. As you can see there are quite a bit of them.

Now Font Awesome is actually a font so because we’re linking this, it’s treating it like we’re linking any sort of text, not an image. It kind of looks a little weird that it’s highlighted blue. So what we’re going to do is add a bit of custom CSS so it has the same color as our footer.

We’re going to create a new CSS file. One line of code we’re going to add is:

.navbar-text > a {
	color: inherit; 
	text-decoration: none;
}

What this will so is, for any link within a navbar-text class, it will make the color inherit and the text-decoration set to none so you won’t see that blue highlighted color. We’re going to save this in our CSS folder and I’m going to name this ‘custom.’

When we go back to our index file, we’re going to have to add one line of code to link that CSS file:

<link href="css/custom.css" rel="stylesheet">

So now when we go to our preview, it’s still a link but it doesn’t have the blue color anymore so it looks a lot better in our footer.

So that’s it for our tutorial on installing Font Awesome and adding social media icons to the footer. In our next video, we’re going to start building the site a little bit and we’re going to add the jumbotron. Make sure to subscribe and check us out in the next video.

Sharing is caring!