0

I'm trying to add some glyphicons to my web applications through bootstrap, but haven't used bootstrap before and I don't understand how I'm supposed to be doing this. There are a lot of confusing articles on how to do this, and I followed a few but haven't gotten any results. So far, I have added bootstrap into my project using NuGet.

I looked through my files and all the dependencies and references are there. However, when I run my project, the glyphicons still don't show up. I've posted the code below of the page where I want to show these glyphicons. Any idea on what more I have to do to get them to work?

@page
@model CustomerPageTest.Pages.Customer.ListModel
@{
    ViewData["Title"] = "List";
}

<div>
    <p align="right">
        <a class="btn btn-dark"
           asp-page="./AddCustomer">Add New Customer</a>
    </p>
</div>

<form method="get">
    <div class="form-group">
        <div class="input-group">
            <input type="search" class="form-control" asp-for="SearchTerm" />
            <span class="btn btn-outline-dark">
                <i class="glyphicon glyphicon-search"></i>
            </span>
        </div>
    </div>
</form>

<table class="table">
    @foreach(var customer in Model.Customers)
    {
        <tr>
            <td>@customer.name</td>
            <td>@customer.notes</td>
            <td>
                <a class="btn btn-outline-dark"
                   asp-page="/Assessment/AddAssessment" asp-route-customerId ="@customer.customer_id">
                    <i class="glyphicon glyphicon-plus"></i> 
                </a>
            </td>
        </tr>
    }
</table>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
CKneeland
  • 119
  • 3
  • 14
  • Did you look at your browser's network tab to make sure all files loaded without issue? Did you make sure you have the proper markup to load the necessary content files? I don't see that in your question. – mason Jun 22 '20 at 14:53
  • I'm not actually sure how to check that all the files loaded correctly or how to check that I have the proper markup to load the files. How might I go across checking that? – CKneeland Jun 22 '20 at 14:59
  • Umesh's answer covered adding the correct markup to the page to load the file. For checking that files loaded correctly, you'd open your browser's developer tools to the Network tab, then check to make sure that all files are either loaded from cache or get a status code response in the 2XX range and not something like a 404 or 500 error. – mason Jun 22 '20 at 16:48

1 Answers1

0

You need to put below bootstrap.min.css file on to your page to display glyphicon.

@page
@model CustomerPageTest.Pages.Customer.ListModel
@{
    ViewData["Title"] = "List";
}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
<div>
    <p align="right">
        <a class="btn btn-dark"
           asp-page="./AddCustomer">Add New Customer</a>
    </p>
</div>

<form method="get">
    <div class="form-group">
        <div class="input-group">
            <input type="search" class="form-control" asp-for="SearchTerm" />
            <span class="btn btn-outline-dark">
                <i class="glyphicon glyphicon-search"></i>
            </span>
        </div>
    </div>
</form>

<table class="table">
    @foreach(var customer in Model.Customers)
    {
        <tr>
            <td>@customer.name</td>
            <td>@customer.notes</td>
            <td>
                <a class="btn btn-outline-dark"
                   asp-page="/Assessment/AddAssessment" asp-route-customerId ="@customer.customer_id">
                    <i class="glyphicon glyphicon-plus"></i> 
                </a>
            </td>
        </tr>
    }
</table>
Umesh
  • 529
  • 5
  • 11