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

Adding icons


It's time to add icons to our navigation. Glyphicons that come with Bootstrap 3 are dropped in Bootstrap 4. Here, we'll use the large library of icons offered by Font Awesome. Other icon font sets can be found around the Web.

Font Awesome is a font icon set that offers 628 icons at the time of writing this book. Font Awesome icons are free, open source, and built to play nice with Bootstrap. You can see the Font Awesome home page at http://fortawesome.github.io/Font-Awesome/.

Let's fold Font Awesome into our workflow.

In Chapter 2, Creating Your Own Build Process with Gulp, you saw to use Font Awesome by loading it from CDN. Here, we compile the CSS code of Font Awesome into our main app.css file:

  1. First, install Font Awesome in your project folder by running the following command in your console:

          bower install font-awesome --save
    
  2. After that, you can import Font Awesome's main SCSS file into your scss/app.scss file:

          @import "includes/variables"; 
          @import "font...