Bootstrap 4 – Icons

The customization of our  MyPhoto navbar is coming along nicely. We now have a nice scroll animation in place as well as a set of navbar items that update themselves based on the user’s scroll position. However, we are not quite there yet. The items in our Profile drop-down menu still look quite plain. Wouldn’t it be nice if we could use icons to increase each drop-down menu item’s readability? Adding icons to controls and menus helps draw attention to important functionalities while clearly outlining a control’s intended purpose.

When it comes to icons, a popular choice among web developers is the Font Awesome icon library ( https://fortawesome.github.io/Font-Awesome/), which is a free collection of over 500 icons that were made to be used with Bootstrap websites; refer to sample icons in figure 4.5:

Figure 4.5: Examples of various Font Awesome icons

To download the icon library, run an NPM install as follows:

npm install font-awesome

Once the download completes, you will see that a new subdirectory named  font-awesome has been created inside your  node_modules directory:

  • node_modules/
    • font-awesome/
      • css/
      • fonts/
      • less/
      • scss/

Font Awesome icons ship as fonts. In order to be able to use the downloaded icons, all that you will need to do is include the Font Awesome style sheet that is located inside your  node_modules/font-awesome/css directory. Insert the following link into the  head of our HTML document:

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

The complete  head of our HTML document should now look as follows:

<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>ch04-example04</title>
   <link rel="stylesheet" 
   href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
   <link href='https://fonts.googleapis.com/css?family=Poiret+One' 
   rel='stylesheet' type='text/css'>
   <link href='http://fonts.googleapis.com/css?
   family=Lato&subset=latin,latin-ext' rel='stylesheet' 
   type='text/css'>
   <link rel="stylesheet" href="styles/myphoto.css" />
   <link rel="stylesheet" href="node_modules/font-awesome/css/font-
   awesome.min.css" />
</head>

To use an icon, just apply the icon’s class name to an HTML element. The class names for individual icons can be determined by looking at either the Font Awesome documentation or using GlyphSearch (http://glyphsearch.com/), a handy little search engine that lets you search for icons, preview them, and then copy their class name to use within your HTML document. It is important to note that each (Font Awesome) icon must be a child of a special class—the  fa class; that is, to use an icon, you must first apply the  fa class to the selected element, followed by the icon’s name. For example, if your icon’s class name is  fa-  user, then you will set your element’s class attribute to :

<span ></span>

Note that while it is perfectly acceptable to apply a  fa class to any HTML element, the convention for icons is to use the  <i> element, which is as shown:

<i ></i>

Having applied an  fa class to our desired element, we can now style it just as we would style any other element. For example, use this to change its color:

<i  style="color: red;"></i>
Figure 4.6: Changing the color of a Font Awesome icon

Now that we know how to include icons in our page, let’s go ahead and customize our Profile drop-down menu so that the individual drop-down menu items contain both text and a descriptive icon. Feel free to select your own icons; however, appropriate choices for each item would be as follows:

  • fa-user for Profile
  • fa-cog for Settings
  • fa-sign-out for Logout

To add the individual icons to our drop-down menu, simply create a new  <i> in front of the menu item’s text and apply the appropriate class:

<ul class="navbar-nav pull-right">
   <li class="nav-item dropdown ">
      <a href="#" class="nav-link dropdown-toggle" data-toggle= 
      "dropdown" role="button"
         aria-haspopup="true" aria-expanded="false"> Profile <span 
         class="caret"></span>
      </a>
      <div class="dropdown-menu dropdown-menu-right">
         <a class="dropdown-item" href="#" data-toggle="modal" data-
         target="#profile-modal">
             <i class="fa fa-user"></i> Profile
         </a>
         <a class="dropdown-item" href="#" data-toggle="modal" data-
          target= "#settings-modal">
             <i class="fa fa-cogs"></i> Settings
         </a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#"> 
            <i ></i> Logout
         </a>
      </div>
   </li>
</ul>

Take a look at the screenshot in figure 4.7:

Figure 4.7: Our navbar’s new drop-down menu sporting Font Awesome icons
Bootstrap 3 came with a large library of icons that range from symbols and objects to products. While the icons were provided by a third party (GLYPHICONS), they were free to use (for non-commercial purposes) and fully customizable. In this sense, the term customizable referred to the fact that they came embedded as fonts. This means that you could style them just as you would style any other text. For example, you can change their color or size by applying CSS in the same way as you would to any other HTML element. Unfortunately, Bootstrap 4 no longer ships with icons.

Using and customizing alerts

Now that we know how to use icons, let’s turn to a different topic—namely, alert boxes. Alert boxes are typically used to highlight an important event or to emphasize an important message. As such, the purpose behind alerts is to provide a content area that immediately stands out and therefore cannot be easily overseen by the user. For example, imagine that  MyPhoto only supports browsers above certain versions. In such a case, a user who visits the site with an unsupported browser version should be notified that their browser is not supported. After all, the website may not function or display correctly when viewed with unsupported software. Bootstrap provides us with the  alert class, which makes it very easy for us to implement this hypothetical scenario (the JavaScript for browser detection will be presented in  Chapter 5, Speeding Up Development Using jQuery Plugins).

Bootstrap’s alert supports eight contexts: Primary, Secondary, Success, Warning, Info, and Danger as well as Light and Dark (these contexts stand in contrast to Bootstrap 3, which only supported four different contexts).

Each context class styles the element to which it is applied differently, depending on the intended message. Refer to figure 4.8, which lists the eight default alert styles that come with Bootstrap:

Figure 4.8: Bootstrap’s eight contextual alert classes: .alert-success, .alert-warning, .alert-info, .alert-danger, .alert-primary, .alert-secondary, .alert-light and .alert-dark.

Let’s go ahead and apply one of these styles to our new unsupported browser alert box. Go ahead and create a new  div and set its class to  alert alert-danger:

<div >
    <strong>Unsupported browser</strong> Internet Explorer 8 and 
    lower are not supported by this website.
</div>

Now insert this  div  alert inside our  Welcome section, below the jumbotron: (example05.html):

<div class="container-fluid myphoto-section bg-myphoto-welcome" >
   <div class="container">
      <div class="jumbotron">
         <h1>
            Welcome to MyPhoto
         </h1>
         <p>Photographs you can cherish!</p>
      </div>
      <div class="alert alert-danger">
         <strong >Unsupported
         browser</strong> 
         Internet Explorer 8 and lower are not
         supported by this website.
      </div>
   </div>
</div>

Save and refresh. Voila! We have just created our very first Bootstrap alert; refer to figure 4.9:

Figure 4.9: Our first dangerous alert dialog (example05.html)

However, something isn’t quite right. What if the user knows that their browser is outdated, but still wishes to continue viewing the contents of our Welcome section without the invasive alert? Could we provide a way for the user to acknowledge the message and then allow them to continue browsing without its invasive presence? The answer is yes. Bootstrap provides us with a very easy way to make alerts dismissible using the  data-dismiss attribute:

<div class="alert alert-danger alert-dismissible">
   <a href="#"  data-dismiss="alert" aria-
   label="close">&times;</a>
   <strong>Unsupported browser</strong> Internet Explorer 8 and lower 
   are not supported by this website.
</div>

This will add an X to the right of our alert dialog. Adding the  alert-dismissible class will align the X and have it inherit its color. Click on this X and see the alert disappear.

This is great. Users can now dismiss our alert. However, what happens when the user jumps straight into a different section of  MyPhoto? Currently, the alert is placed inside our Welcome section. As such, users viewing other sections of our website will not necessarily be able to see the alert dialog. The solution is to adjust the position of our alert dialog so that it appears stuck to our page, regardless of the section that the user is currently in. How do we do this? First, we will need to take the alert outside of our Welcome section and move it just below our navbar. This will make the alert hidden behind our fixed navbar. To make the alert visible below our navbar, we can simply offset the position of the alert from the top of the page using the CSS  margin-top property. To then make the alert sticky—that is, fixed below the navbar regardless of which section the user is currently in—we use the CSS  position property and set it to fixed. Lastly, we can adjust the left offset and width of our alert so that it is nicely indented from the left-hand side of our page and stretches horizontally across the page (note that for the sake of keeping the sample code short and concise, we are applying inline styles to achieve this. However, as we will discover in  Chapter 10, Optimizing Your Websitewe should normally avoid using inline styles whenever we can). Observe the following code:

<nav class="navbar navbar-expand-lg fixed-top navbar-myphoto">
   <!-- Navbar markup -->
</nav>
<div class="alert alert-danger alert-dismissible"
   style="position: fixed; margin-top: 4em; width: 90%;margin-left: 
   4em;">
   <a href="#" class="close" data-dismiss="alert" 
      aria-label="close">&times;</a>
   <strong >Unsupported browser</strong> 
   Internet Explorer 8 and lower are not supported by this website.
</div>

Take a look at the screenshot in figure 4.10:

Figure 4.10: Our sticky alert dialog now stretches across the entire page and remains visible across the sections (example06.html)

Great! Try scrolling down the page and observe how our alert remains fixed below the navbar. Now, wouldn’t it be great if we could achieve the same effect without any of the inline styles? Thanks to Bootstrap, we can. Go ahead and remove the inline styles and add the fixed-top class to the alert instead (just as we did with the navbar). Save and refresh. Did you note how the alert now appears above the navbar? You can rectify this by adjusting the alert’s margin-top just as earlier. We can further customize the alert by adding an icon:

<div class="alert alert-danger alert-dismissible alert-myphoto fixed-top" style="position: fixed; margin-top: 4em; width: 90%;margin-left:
4em;">
     <a href="#" class="close" data-dismiss="alert" aria-                    
      label="close">&times;</a>
     <strong class="alert-heading">
         <i ></i> Unsupported browser
     </strong>
     Internet Explorer 8 and lower are not supported by this website.
</div>

Our alert is already looking pretty decent. It is positioned nicely below our navbar, is dismissible, and sports a nice little icon. However, it somehow doesn’t look very dangerous, does it? How about we customize its colors a bit? For example, we can darken the background color slightly and lighten the foreground color.

However, how will we go about doing this without modifying the Bootstrap source? Easy! Just apply the desired CSS properties using either an inline style or, even better, apply it globally throughout our style sheet. Go ahead and open  styles/myphoto.css. Insert the following CSS snippet, save, and then refresh the  MyPhoto page:

.alert-danger {
    background-color: #a94342;
    color: white;
}

The snippet that you just added to your myphoto.css file should be pretty self-explanatory—it applies a white foreground and a dark red background (figure 4.11) to any element that has the class  alert-danger. Consequently, this foreground and background color will apply to any alert dialog that uses the  alert-danger context class. Congratulations! You just learned how to customize your first Bootstrap component!

Let’s finish by tidying any inline styles that we created (we will talk more about inline styles in  Chapter 10, Optimizing Your Website; for now, just accept that you should avoid using inline styles whenever possible). Create a custom class,  alert-myphoto, extract the inline styles into it, and add a  z-index rule to ensure that our warning will appear above all the other elements on the page:

.alert-myphoto {
    margin-top: 4em;
    margin-left: 4em;
    width: 90%;
    z-index: 3000;
}

Also, the final HTML code should be like this:

  <div class="alert alert-danger alert-dismissible alert-myphoto fixed- 
  top">
    <a href="#" class="close" data-dismiss="alert" 
    arialabel="close">&times;</a>
    <strong class="alert-heading"><i ></i> 
    Unsupported browser</strong> Internet Explorer 8 and lower are not 
    supported by this website.
</div>

Take a look at the screenshot in figure 4.11 and note how our alert is now nicely offset from the top and left of the page:

Figure 4.11: Our alert now with a white foreground and a darker background (example07.html)
Bootstrap defines the colors for the individual context classes using the  $theme-colors variable in _variables.scss. By default, this looks as follows:
$theme-colors: ( primary: $blue, secondary: $gray-600, success: $green, info: $cyan, warning: $yellow, danger: $red, light: $gray-100, dark: $gray-800 ) !default;

As such, one can globally override the default background color for a given alert by changing the value of the context to your desired background color. For example, to make the background of the danger alert blue, one can write the following:
$theme-colors: ( danger: $blue, ... ) !default;
However, as previously noted, it is not recommended to do this as this will change the color of all danger alerts across the entire website.

When adding links to alerts, you should apply the alert-link class to the link element. This will style the element to match the alert’s context.

Comments are closed.