CODEWITHSUNDEEP
htmliconsbootstrap-5
rockets4all
rockets4all

Reputation: 876

Some Bootstrap 5 icons are not showing up

I am having issues with bootstrap 5 not showing certain icons. The bi-search shows perfect, but bi-send does not appear at all. I would normally put this in a code snippet, but the feature does not look to be available anymore so bear with me as I post the html that replicates this issue:

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>
                    <!-- This code shows the search icon fine, but send and many others do not work-->
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="bi bi-send"></i><i class="bi bi-search"></i></span>
                    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>

Upvotes: 19

Views: 40146

Answers (5)

Mike
Mike

Reputation: 106

If you are using yarn then you have to:

  1. run yarn add bootstrap-icons
  2. add import 'bootstrap-icons/font/bootstrap-icons.css'; to your index.js file
  3. use icon (e.g. <i class="bi bi-archive"></i>)

Upvotes: 0

Deyan p
Deyan p

Reputation: 1

I'm trying to use the icons with NextJS and have the same problem. They don't display. That is why I use the SVG for the icons and it works every time.

Upvotes: 0

Mehmet Ability
Mehmet Ability

Reputation: 29

  1. You have to add bootstrap-icons.min.css to
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
  1. Then, you can use this two ways seamlessly ( download bootstrap icons to your project and use it in two )
  1. <i class="bi bi-facebook"></i>
  2. <img alt="Bootstrap" src="bootstrap-icons-1.10.5/graph-up.svg">

good work to you

Upvotes: 2

Siddharth Bhansali
Siddharth Bhansali

Reputation: 2482

Your Bootstrap Icons import is for an older version, send icon didn't exist in that one.

Use the latest version 1.8.1 (as of 26th March 2022):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

Version 1.10.5 Update (as of 10th May 2023):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

You can always find the latest version here.

Upvotes: 31

Phalak
Phalak

Reputation: 39

You can add following -

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

Upvotes: 0

Related Questions