O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling the footer

The biggest feature of the footer is our social icons. Font Awesome to the rescue!

Consulting the Font Awesome documentation, we find a slew of available icons under the category of Brand Icons. Here is the direct link:http://fortawesome.github.io/Font-Awesome/icons/#brand

Now we only need to replace the text for each social link in our footer, in the html/includes/footer.html file, with i elements, using the appropriate classes:

<ul class="social"> <li><a href="#" ><i class="fa fa-twitter"></i></a></li> <li><a href="#" ><i class="fa fa-facebook"></i></a></li> <li><a href="#" ><i class="fa fa-linkedin"></i></a></li> <li><a href="#" ><i class="fa fa- google-plus"></i></a></li> <li><a href="#" ><i class="fa fa- github-alt"></i></a></li> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required