BootStrap Glyphicon display issue

I've tried multiple ways. Glyphicon doesn't load. what am i missing or where am i making a mistake? i'm clueless now

I went through this answer: Answer

still icon just doesn't appear.

and my browser's console has no errors. Only Xhr requests with return status 200.

Html:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>@ViewBag.Title</title>
    <link href="~/AppContent/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/AppContent/css/Custom.css" rel="stylesheet" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">

</head>
<body>
    <div class="container-fluid">

        @*Header*@
        <div>
            <div class="row" style="background-color:blanchedalmond;">
                <div class="col-md-4" style="border:2px solid black;">
                    <h4>APPLICATION</h4>
                </div>
                <div class="col-md offset-md-7" style="border:2px solid black;">
                  <span class="glyphicon glyphicon-arrow-right">|<a href="#">Login</a></span>
                </div>
            </div>
        </div>

        @*Left panel*@
        <div>

        </div>

        @*Body*@
        <div>
            @RenderBody()
        </div>

        @*Right Panel*@
        <div>

      </div>
    </div>
    <script src="~/AppContent/js/jquery-3.2.1.min.js"></script>
    <script src="~/AppContent/js/tether.min.js"></script>
    <script src="~/AppContent/js/bootstrap.min.js"></script>
</body>
</html>

and this is my folder structure:

I will appreciate the help, thanks :) P.s.: I'm at the initial level of bootstrap.

Solution

Folder Structure :

Attaching external files in index page:

Check your folder structure. Follow the structure of attaching css, script as showing in the index.html file.

I attached the screenshot.

Remove "~" sign and your root folder name i.e. AppContent.