Cannot get bootstrap glyph icons to show up in any browser

markaaronky 0
Viewed 30

I am following a Pluralsight .Net Core tutorial that involves heavy use of Bootstrap glyph icons. However, none of the glyph icons will show in any browser on my Windows 10 system (I've tried both the latest version of Chrome and Edge). I'm using Bootstrap 5.2.0 downloaded from the official CDN. The default bootstrap references in the default project created for me when I started the Pluralsight tutorial referenced a local folder (see code snips below) but since this wasn't working my first thought was to make the changes you see in my code snips, referencing the CDN instead. From my _Layout.cshtml:

<!-- link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />  -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">

and:

<!-- script  src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"></script>

The code from the Pluralsight tutorial that SHOULD render an input box and a glyph is as follows:

<form  method="get">
<div class="form-group">
    <div class="input-group">
        <input type="search" class="form-control" value="" />
        <span class="input-group-btn">
            <button class="btn btn-default"></button>
            <i class="glyphicon glyphicon-search"></i>
        </span>
    </div>
</div>

Please note that I do have a closing </FORM> tag in the above code but StackOverflow's code editor keeps cutting it out on me!

However, what I end up with is illustrated below. I have highlighted in yellow where the glyph SHOULD appear. There does appear to be an invisible button here: If I hover over this area a rectangular outline appears as you would expect but there is obviously nothing graphical:

my output

Things I have tried:

  1. Different web browsers (Chrome and Edge)
  2. Making sure I have all Windows updates installed
  3. Going to a w3 Schools Bootstrap tutorial and starting with a working simple Bootstrap "hello world" page then adding my offending code (the form-group code I show above). I also get the same result: no glyph, just an empty button placeholder
  4. Googling different glyph icon names and trying something other than glyphicon-search. I get the same result. I cannot display any glyph icons in any browser.
  5. Ctrl-u on the page source and making sure bootstrap is indeed being loaded by my page

I am at a complete loss here. Any help would be appreciated.

.net-core bootstrap-5 css
1 Answers

You are using Bootstrap@5.2, the icons are not part of the original bundle, you need to include an additional css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

And you need to use different classes for the icons, you can get them from here.

Example

Instead of

glyphicon glyphicon-search

use

bi bi-search


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

<div class="form-group">
  <div class="input-group">
    <input type="search" class="form-control" value="" />
    <span class="input-group-btn">
      <button class="btn btn-default"></button>
      <!--<i class="glyphicon glyphicon-search"></i>-->
      <i class="bi bi-search"></i>
    </span>
  </div>
</div>

If you still want to use Glyphicons you will need to use the previous bootstrap version, as these are only free on that version

https://getbootstrap.com/docs/3.3/components/

Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost

userALF40
Related