Book Image

Bootstrap 4 Site Blueprints - Second Edition

By : Ian Whitney, David Cochran
Book Image

Bootstrap 4 Site Blueprints - Second Edition

By: Ian Whitney, David Cochran

Overview of this book

Packed with trade secrets, this second edition is your one-stop solution to creating websites that will provide the best experience for your users. We cover six popular, real-world examples, where each project teaches you about the various functionalities of Bootstrap 4 and their implementation. The book starts off by getting you up and running with the new features of Bootstrap 4 before gradually moving on to customizing your blog with Bootstrap and SASS, building a portfolio site, and turning it into a WordPress theme. In the process, you will learn to recompile Bootstrap files using SASS, design a user interface, and integrate JavaScript plugins. Towards the end of the book, you will also be introduced to integrating Bootstrap 4 with popular application frameworks such as Angular 2, Ruby on Rails, and React.
Table of Contents (15 chapters)
Bootstrap 4 Site Blueprints
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Using Font Awesome in your theme


In Chapter 5, Bootstrappin' Your Portfolio, you can read how to compile the Font Awesome CSS code into your local style sheet with Sass. You can also run Font Awesome from CDN, as described in Chapter 2, Creating Your Own Build Process with Gulp.

To run Font Awesome from CDN in your WordPress theme, you can enqueue the CDN URL. Edit and add the following line of PHP code to activate Font Awesome:

    //enqueues the external font awesome stylesheet 
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'); 

Building the social links with Font Awesome

The theme contains two blocks with social links; one fixed on the left side of the page and the other one in the footer. The HTML code for both blocks can be found in the footer.php file. To prevent code duplication you can create a new template called parts/components-social-links.php. Then edit the following HTML code into the new parts/components-social...