Twitter Bootstrap 4 : Customizing Navigation and Icons

Customizing Navigation Bar

You can make navigation bar dark by using the classes navbar-inverse bg-inverse in the nav tag :

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">

This will make it easy for color blind people to view your site.

Icons

We can use the free font-awesome library for displaying icons. Install it using bower.

$bower install components-font-awesome
bower components-font-awesome#*       not-cached https://github.com/components/font-awesome.git#*
bower components-font-awesome#*          resolve https://github.com/components/font-awesome.git#*
bower components-font-awesome#*         download https://github.com/components/font-awesome/archive/4.7.0.tar.gz
bower components-font-awesome#*          extract archive.tar.gz
bower components-font-awesome#*         resolved https://github.com/components/font-awesome.git#4.7.0
bower components-font-awesome#^4.7.0     install components-font-awesome#4.7.0

components-font-awesome#4.7.0 bower_components/components-font-awesome

Add the link to font-awesome css within the head section of the html page :

<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css" />

The head section of the html page will look like this:

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>RubyPlus</title>
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bower_components/tether/dist/css/tether.min.css">
    <link rel="stylesheet" href="../bower_components/components-font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="sticky_footer.css" >
</head>
<body>

Rest of the html is the same as before

Search for the term time in http://glyphsearch.com, you will get the name of the clock icon in the search results. If you click on the icon you will copy the class needed to include it in your web page. For clock, it is:

<i class="fa fa-clock-o"></i>

You can display this icon next to the publish date for a blog a post. You will find useful user account related icons such as:

fa-user  
fa-cog
fa-sign-out

in the font-awesome library. You can add the clock icon to page by adding the code within the container div.

<div class='container-fluid'>
    <i class="fa fa-clock-o"></i>
</div>

In this article, you learned how to customize the Twitter Bootstrap 4 navigation bar and use Font Awesome icons in html pages.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.