I am currently following a tutorial on .Net Core from Pluralsight that heavily relies on Bootstrap glyph icons. However, I'm facing an issue where none of the glyph icons are showing up in any browser on my Windows 10 system (I've tried both the latest versions of Chrome and Edge). I have Bootstrap 5.2.0 downloaded from the official CDN. The default bootstrap references in the project created for me during the tutorial pointed to a local folder initially (see code snippets below), but since that didn't work, I decided to make changes as shown in my code snippets by referencing the CDN instead. From my _Layout.cshtml:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbaa1bda1bf">[email protected]</a>/dist/css/bootstrap.min.css">
and:
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="26444949525552544756661308140816">[email protected]</a>/dist/js/bootstrap.min.js"></script>
The code snippet from the tutorial that is supposed to 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>
Note: There should be a closing </FORM> tag in the above code, but it keeps getting cut off in StackOverflow's editor!
Unfortunately, what I see on my system is far from what is expected. I have marked in yellow where the glyph icon is meant to appear. There seems to be an invisible button present - when I hover over it, a rectangular outline appears, but there is no visible graphic:
https://i.sstatic.net/CQAZ2.jpg
Here are some troubleshooting steps I have already taken:
- Testing with different web browsers such as Chrome and Edge
- Verifying that all Windows updates are installed
- Starting with a simple "hello world" page from a w3 Schools Bootstrap tutorial and then adding my problem code (the form-group code mentioned above) - result is still the same, no glyph, just an empty placeholder button
- Trying various glyph icon names other than glyphicon-search - all yield the same outcome, no glyph icons displayed
- Confirming via Ctrl+U that Bootstrap is indeed being loaded by my page
I seem to be stuck at this point. Any assistance would be greatly appreciated.