title: "clock" font-awesome icon not showing on my webpage
body: <p><a href="https://i.stack.imgur.com/df66c.png" rel="nofollow noreferrer">I am supposed to make following webpage</a></p>
  
  <p>But when I am using font-awesome class to add clock icon highlighted in the image.Its not showing.
  following is my code. Where  am i making mistake? thanks in advance.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Assignment1_2&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto&amp;display=swap" rel="stylesheet"&gt;
    &lt;style&gt; 
    *{ font-family: 'Roboto', sans-serif;}
  
  
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;nav class="navbar navbar-expand-sm bg-dark navbar-dark"&gt;
      &lt;div class = "container"&gt;
       &lt;a class="navbar-brand" href="#"&gt;Layout3&lt;/a&gt;
       &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"&gt;
         &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
       &lt;/button&gt;
       &lt;div class="collapse navbar-collapse" id="collapsibleNavbar"&gt;
        &lt;ul class="navbar-nav"&gt;
         &lt;li class="nav-item"&gt;
           &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
         &lt;/li&gt;
         &lt;li class="nav-item"&gt;
           &lt;a class="nav-link" href="#"&gt;Services&lt;/a&gt;
         &lt;/li&gt;
         &lt;li class="nav-item"&gt;
           &lt;a class="nav-link" href="#"&gt;Contact&lt;/a&gt;
         &lt;/li&gt;    
        &lt;/ul&gt;
       &lt;/div&gt;
      &lt;/div&gt;  
    &lt;/nav&gt;
  
    &lt;!--- navbar ends --&gt;
    &lt;div class="container"&gt;
     &lt;div class="row"&gt;
       &lt;div class="col-md-8 pt-5"&gt;
         &lt;h2&gt;Blog Post Title&lt;/h2&gt;
         &lt;h5&gt;&lt;small&gt;by&lt;/small&gt;&lt;span class = "text-primary"&gt; Text&lt;/span&gt;&lt;/h5&gt;
         &lt;hr class="w-100 mx-auto"&gt;
       &lt;/div&gt;
  
       &lt;div class="col-md-4 pt-3" &gt;
        &lt;span class="d-xl-block px-4 py-3 rounded" style ="background-color: #e9ecef; border: 1px solid #ced4da"&gt;
         &lt;h5 class="pt-0"&gt;Blog Search&lt;/h5&gt;   
          &lt;div class="input-group md-form form-sm pl-0 pb-2 pt-1"&gt;
             &lt;input class="form-control my-0 py-1 border-50 rounded-left  "style="border-left:2px solid #ced4da;     border-top:2px solid #ced4da; border-bottom:2px solid #ced4da; border-right:1px solid #ced4da" type="text"  aria-label="Search"&gt;
             &lt;div class="input-group-append"&gt;
                &lt;span class="input-group-text bg-light border-50 border-left-0 rounded-right"style="border-width: 2px" id="basic-text1"&gt;&lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
             &lt;/div&gt;
          &lt;/div&gt;
        &lt;/span&gt;
       &lt;/div&gt;
      &lt;/div&gt; 
      &lt;div class="row"&gt;
      &lt;div class="col-md-8 pt-5"&gt;
       &lt;i class="far fa-clock"&gt;&lt;/i&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But when I am using font-awesome class to add clock icon highlighted in the image.Its not showing.
  following is my code. Where  am i making mistake? thanks in advance</p>