BootStrap Glyphicon display issue

Question

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.

seven · Accepted Answer · 2017-04-25T10:34:34.530

3

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.

edited Apr 25 '17 at 10:34

answered Apr 24 '17 at 09:19

seven

146
2
9

bro, can you provide me the directory structure properly, i am unable to understand on the IDE you are using, plus, please, also provide how to link the script files from folders as well. Damn, never thought this installation could get on my nerves :( – ARr0w Apr 25 '17 at 06:09

score 2 · Answer 2 · answered Apr 24 '17 at 07:45

2

Your error solved here, I think the error due to the mistake of bootstrap library that you included

....

answered Apr 24 '17 at 07:45

priya

39
6

score 1 · Answer 3 · answered Apr 24 '17 at 07:29

1

You have written wrong HTML for glyphicon, you can update your HTML with following code

<a href="#"><span class="glyphicon glyphicon-arrow-right"></span>Login</a>

answered Apr 24 '17 at 07:29

Super User

9,448
3
31
47

i tried your html code, still not displaying the glyphicons. – ARr0w Apr 24 '17 at 07:38
Can you share working fiddle for this, so we can resolve your problem – Super User Apr 24 '17 at 07:40
http://jsbin.com/sovudamibo/edit?html,output ... In above link, i replaced local address of css and javascript with online links of css and javascipt files, icon is appearing there. but not in my local. Do i have the wrong bootstrap files? :S – ARr0w Apr 24 '17 at 07:46

BootStrap Glyphicon display issue

3 Answers3