The icon representing a clock from the font-awesome library is not displaying properly on my website

I've been tasked with creating the webpage below

However, when I try to use the font-awesome class to include the clock icon as shown in the image, it's not displaying correctly. Here is the code I'm using. Can anyone point out my mistake? Thank you in advance.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Assignment1_2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  <style> 
  *{ font-family: 'Roboto', sans-serif;}


  </style>
</head>
<body>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class = "container">
     <a class="navbar-brand" href="#">Layout3</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
       <li class="nav-item">
         <a class="nav-link" href="#">About</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Services</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Contact</a>
       </li>    
      </ul>
     </div>
    </div>  
  </nav>

  <!--- navbar ends -->
  <div class="container">
   <div class="row">
     <div class="col-md-8 pt-5">
       <h2>Blog Post Title</h2>
       <h5><small>by</small><span class = "text-primary"> Text</span></h5>
       <hr class="w-100 mx-auto">
     </div>

     <div class="col-md-4 pt-3" >
      <span class="d-xl-block px-4 py-3 rounded" style ="background-color: #e9ecef; border: 1px solid #ced4da">
       <h5 class="pt-0">Blog Search</h5>   
        <div class="input-group md-form form-sm pl-0 pb-2 pt-1">
           <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">
           <div class="input-group-append">
              <span class="input-group-text bg-light border-50 border-left-0 rounded-right"style="border-width: 2px" id="basic-text1"><i class="fa fa-search" aria-hidden="true"></i></span>
           </div>
        </div>
      </span>
     </div>
    </div> 
    <div class="row">
    <div class="col-md-8 pt-5">
     <i class="far fa-clock"></i>
  </div>
</div>
</div>
</body>
</html>

However, when I try to use the font-awesome class to include the clock icon as shown in the image, it's not displaying correctly. Here is the code I'm using. Can anyone point out my mistake? Thank you in advance.

htmlcssbootstrap-4

Answer №1

To indicate the use of FontAwesome 4.7, include the following code:

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

But if you are working with FontAwesome 5, use the far class instead.

<!DOCTYPE html>
<html lang="en>
<head>
  <title>Assignment1_2</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  <style> 
  *{ font-family: 'Roboto', sans-serif;}


  </style>
</head>
<body>
  
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class = "container">
     <a class="navbar-brand" href="#">Layout3</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
       <li class="nav-item">
         <a class="nav-link" href="#">About</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Services</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Contact</a>
       </li>    
      </ul>
     </div>
    </div>  
  </nav>

  <!--- navbar ends -->
  <div class="container">
   <div class="row">
     <div class="col-md-8 pt-5">
       <h2>Blog Post Title</h2>
       <h5><small>by</small><span class = "text-primary"> Text</span></h5>
       <hr class="w-100 mx-auto">
     </div>

     <div class="col-md-4 pt-3" >
      <span class="d-xl-block px-4 py-3 rounded" style ="background-color: #e9ecef; border: 1px solid #ced4da">
       <h5 class="pt-0">Blog Search</h5>   
        <div class="input-group md-form form-sm pl-0 pb-2 pt-1">
           <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">
           <div class="input-group-append">
              <span class="input-group-text bg-light border-50 border-left-0 rounded-right"style="border-width: 2px" id="basic-text1"><i class="fa fa-search" aria-hidden="true"></i></span>
           </div>
        </div>
      </span>
     </div>
    </div> 
    <div class="row">
    <div class="col-md-8 pt-5">
     <i class="fa fa-clock-o"></i>
      
  </div>
</div>
</div>
</body>
</html>

Answer №2

Ensure to add the provided code snippet within the <head></head> section of the webpage

<script src='https://kit.fontawesome.com/a076d05399.js'></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having an issue with my code in angular 12 where I am unable to successfully call an API to retrieve a token, and then pass that token to another API for further processing

Here is the code snippet containing two methods: getToken and validateuser. I am fetching the token from getToken and passing it as a parameter to validateuser. However, before retrieving the token, my second API call is being executed. ...

javascripthtmlangulartypescriptrxjs

What's the best way to ensure that the iframe resolution adjusts dynamically to perfectly fit within its container?

iframe-screenshot Displayed in the image are two iframes, but at times I may need to display three. The aim is to ensure that all iframes are responsive within their containers. Below is my existing CSS styling: iframe { width: 100%; height: 1 ...

javascripthtmlcssiframe

What is the best way to generate multiple progress bars by leveraging a for loop?

Exploring the code snippet below, I've been creating a progress bar that reacts to specific data input in array form. However, the issue I've encountered is that the code only generates a single progress bar. How can I incorporate this into my f ...

javascripthtmlcssfor-loopprogress-bar

What is the method for choosing multiple IDs using CSS?

Is there a way to target multiple IDs in CSS? For instance: #test_id_*{ } <div id="test_id_10"></div> <div id="test_id_11"></div> ...

css

"Modify the MySQL database each time a user changes the value in a

As a student, I am looking to update value(s) whenever a student changes the value(s) in the correction or update form. So far, I have been able to retrieve and display values in text boxes based on the name selected from a dropdown list from the database ...

phpjavascripthtmlmysqlajax

What are some strategies for increasing efficiency in my drag and drop process?

Update #2 Wow, transition was stuck at .35s. My CSS just wasn't updating properly :( UPDATE: Anyone know if requestAnimationFrame could help with this? I've got a rotating image reel and I want users to be able to swipe left or right to switch ...

javascripthtmlcss

The application of document.body.style.backgroundColor is not compatible with an external CSS style sheet

Why does document.body.style.backgroundColor not work with an external CSS style sheet? I have the following CSS: body { background-color: red; } In my css style sheet, when I use JavaScript alert alert(document.body.style.backgroundColor);, it sh ...

javascripthtmlcss

What is the best way to customize the appearance of a mat-checkbox in Angular using Angular Material?

Is there a way to customize the appearance of a mat-checkbox that actually works? I've tried various solutions without success. I attempted to disable view encapsulation and use classes like mdc-checkbox__background, but nothing changed. Even applyin ...

cssangularangular-material

Utilizing inline javascript to dynamically update the selected option of a radio button

A form on my website includes two radio buttons: one labeled 'trigger_unit' and the other labeled 'normal_unit'. In addition, there is a select drop-down menu with four values and a default NULL option. <select rel="dropdown" name=" ...

javascripthtmldynamic

The changing perspective in relation to the current position of a background

I am currently working on implementing a parallax effect, which is mostly successful. However, I have encountered a minor issue. Instead of the parallax effect being relative to the element's current position, it abruptly jumps to position 0. How can ...

javascriptjqueryhtmlcss

Enhance the CSS Transition for a Seamless Bootstrap Toggle Menu Experience

I attempted to modify the Bootstrap Toggle Menu slide effect from top to bottom to left to right. You can view the website here: After experimenting with various CSS codes (I prefer using pure CSS for this effect), I finally discovered this one: .collaps ...

htmlcsstwitter-bootstrap-3

Saving the index.html file to disk when the button is clicked

Is there a way to export the current HTML page to a file? I have attempted to achieve this using the following code, but it only works when the page is loaded and not with a button click. <?php // Start buffering // ob_start(); ?> <?php file_pu ...

javascriptphphtmljqueryajax

The thumbnail image is failing to load, and when I hover over an image, it moves upwards

I seem to be encountering an issue with a website I uploaded for testing. Everything appears to be working correctly when checked locally in Dreamweaver CS6. However, once the site is uploaded, some issues arise. When hovering over the images, a problem is ...

javascripthtml

Leveraging AJAX for seamless PHP execution without page refresh

I have this HTML form: <form class="clearfix" method="POST"> <input name="username" type="text" placeholder="Username:"> <input name="password" type="password" placeholder="Password:"> <textarea name="comment" placeholder="Comment: ...

phphtmlajaxformspost

incorporate a new component in real-time

I need help with dynamically adding components to my container in AngularJS. I have a componentA that functions as a container, and I want to add multiple instances of componentB when a button is pressed. Currently, I can successfully add a single instanc ...

javascripthtmlangularjs

What is the reason for having a space between the <body> and the <html> tags?

Can you explain why there is a gap between the top of the green box and the browser window in Chrome and Firefox? I've tried various CSS configurations to eliminate the apparent space between the html and body elements, but it seems that some padding ...

htmlcss

Do you think there is a more efficient way to solve this issue?

const [active, setActive] = React.useState(["active", "", "", "", ""]);``your unique text`` const hrefs = React.useMemo( () => ["/", "/about", "/skills", "/projects", "/contact"], [] ); React.useEffect(() => { setInterval(() => { ...

javascripthtmlreactjsmaterial-ui

Connecting components in React using their IDs on the same page

In my project to create a one-page website in React, I have divided it into different components such as a navbar component and an education component. My goal now is to link the navbar to the education section. In my App.js file, I am including the educat ...

htmlreactjs

Sort through the JSON data and showcase it in a gridded format

I need assistance with displaying data from a JSON object in a grid based on user selections. The user should be able to select a year and make from a dropdown menu, and the corresponding data should then be filtered and displayed in a grid. For example, i ...

javascriptjqueryhtml

Resizing the container div to perfectly fit the displayed React component

Is there a way to render a component with its style and position defined by specific cases without having to create a container that takes up the entire body? I want the styles of the container to match those of the component, without the need for the cont ...

css