Question 203581 in Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap 5 Icon Wont Appear

I am making a website and I am trying to use a bootstrap 5 icon but it won’t appear. This is what it looks like Example1 This is what it is supposed to look like Example2

Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Your awesome title: Technovine Solutions</title>

<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script>

<!-- USER DETAILS START -->
<section>
  <div class="container">
    <div class="row text-center pt-4"></div>
    <div class="col-lg-3">
      <i class="fa fa-user fa-3x"></i>
      <h2 class="display-6">100</h2>
      <p class="text-muted">Active Clients</p>
    </div>
    <div class="col-lg-3">
      <i class="fa-brands fa-windows fa-3x"></i>
      <h2 class="display-6>100</h2>
      <p class="text-muted">Active Clients</p>
    </div>
  </div>
  </div>
</section>
<!-- USER DETAILS CLOSE -->
Tags:

2

Answers


  1. 0

    It seems you are trying to use Font Awesome icons in your Bootstrap 5 project. However, you have not included the Font Awesome library in your project.

    Add it using this:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5/6en8XCp+HHAAK5GSLf2xlYtvJ8U2Q4U+9cuEnJoa3" crossorigin="anonymous" />

    Update the classes in your html code like this:

    <div class="col-lg-3">
  <i class="fas fa-user fa-3x"></i>
  <h2 class="display-6">100</h2>
  <p class="text-muted">Active Clients</p>
</div>
    Login or Signup to reply.
  2. 0

    You are missing the font awesome library

    Just add the following line after the title

    <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    And it will work

    Or copy and paste/replace the following code:

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Your awesome title: Technovine Solutions</title>

<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />


 <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search