fontawesome, bootstrap, express

Font Awesome integration with Bootstrap and Express

Integrating Font Awesome free icons with an Express-Bootstrap powered app

In this tutorial we will be integrating Font Awesome free icons into our Bootstrap powered Express app.

Set up

The starting point of our code is a basic application developed as part of Bootstrap integration with Express exercise.

To kick start our development, go to your terminal window and clone a basic express-bootstrap app into a new directory:

git clone https://github.com/regbrain/express-bootstrap.git fontawesome-bootstrap-express

Go to the new directory:

cd fontawesome-bootstrap-express

Install all dependencies

yarn

You should now have the basic Express app with Bootstrap installed and ready for further work to integrate Font Awesome.

Test if the app installed correctly. In your terminal window, start the app:

node app

In your browser, go to: http://localhost:3000/ and you should see a message "Bootstrap demo Hello world!" with a custom background colour and Zilla Slab font for headings.

Bootstrap demo app

Okay, so now we are ready to leverage the power of Sass and integrate Font Awesome with our Bootstrap css framework.

Install Font Awesome

In your terminal window, if it is still running, teminate the app Ctr+c to go back to a command line and install a free version of Font Awesome icons:

yarn add @fortawesome/fontawesome-free

The Font Awesome assets will be installed in /node_modules directory.

Import styles to your Sass Bootstrap file

In code editor, open file /bootstrap/style.sass. At the moment, it should look like this:

$body-bg: #C0C0C0

@import "../node_modules/bootstrap/scss/bootstrap"

h1, h2, h3, h4
  font-family: 'Zilla Slab', serif
  font-weight: 700

We will add a series of import declarations to bring in all the Font Awesome incon styles:

@import "../node_modules/@fortawesome/font-awesome-free/scss/fontawesome.scss"
@import "../node_modules/@fortawesome/font-awesome-free/scss/brands.scss"
@import "../node_modules/@fortawesome/font-awesome-free/scss/solid.scss"
@import "../node_modules/@fortawesome/font-awesome-free/scss/regular.scss"

Your full style.sass shoud look like this now:

$body-bg: #C0C0C0

@import "../node_modules/bootstrap/scss/bootstrap"

@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands.scss"
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid.scss"
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular.scss"

h1, h2, h3, h4
  font-family: 'Zilla Slab', serif
  font-weight: 700

Copy webfonts into public folder

Copy webfonts folder from /node_modules/@fortawesome/font-awesome to the public folder in your main app directory. This will enable your application to serve Font Awesome fonts (icons) as static files from /webfonts url of your application.

The main integration is done. Let's test a few icons.

Use Font Awesome icons

We will insert a few Font Awesome icons to our template file to check if everything works fine. Open file /views/index.njk. It should look like this:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@700&display=swap" rel="stylesheet">
    <title>{{ title }}</title>
  </head>
  <body>
    <div class="container">
      <h1>Bootstrap demo</h1>
      {{ content }}
    <div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

It is a simple Nunjucks template file. We will add a few icons below the {{ content }} variable to see if they display correctly. Add the following lines to the file:

<i class="fas fa-bolt fa-3x"></i>
<i class="fas fa-bomb fa-3x"></i>
<i class="fas fa-car fa-3x"></i>

The full index.njk file should now look like this:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@700&display=swap" rel="stylesheet">
    <title>{{ title }}</title>
  </head>
  <body>
    <div class="container">
      <h1>Bootstrap demo</h1>
      {{ content }}
      <i class="fas fa-bolt fa-3x"></i>
      <i class="fas fa-bomb fa-3x"></i>
      <i class="fas fa-car fa-3x"></i>
    <div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Test your Font Aweseom icons

In a terminal window, run our app:

node app.js

In your browser, go to: http://localhost:3000/ and you should see a message "Bootstrap demo Hello world!" with three additional icons we added:

FontAwesome Bootstrap Express demo

Powered by

Node
Github
Copyright 2019 - present