Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 119
  • Last Modified:

Glyph icons in Bootstrap 3

Hello there,

I am new to bootstrap 3 and I am expierencting with the glyphs icons and for some reason the icons are not getting displayed,can somebody please help me understand what I am doing wrong. I have this font folder also in application,please see screenshot.

1
cheers
Zolf

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main</title>
    <link href="css/site.css" rel="stylesheet" />
</head>

<body>

    <!-- row 1 -->
    <div class="container" background-color=#E8E8E7>
        <div class="row">
            <header class="col-md-12">
                HEADER
            </header>
        </div>

    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-3"><a class="btn btn-default">Link</a></div>
            <div class="col-md-6"><button class="btn btn-default" type="submit">Left</button></div>
            <div class="col-md-3"><button type="button" class="btn btn-default">Right</button></div>
            <button type="button" class="btn btn-default btn-lg">
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
            </button>
            <button type="button" class="btn btn-default" aria-label="Left Align">
                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
            </button>
           <span class="glyphicon glyphicon-search"></span>
        </div>

        <footer class="row">
            <div class="col-md-2">1/2</div>
            <div class="col-md-7">7/12</div>
            <div class="col-md-3">1/4</div>
        </footer>
    </div>
    <script src="js/jquery-2.0.3.min.js"></script>
</body>

</html>

Open in new window

0
zolf
Asked:
zolf
  • 2
2 Solutions
 
Mukesh YadavFull Stack DeveloperCommented:
Try this ;)

You forgot to include bootstrap.min.css file to use Glyph icons you need this.
<link href="css/bootstrap.min.css" rel="stylesheet" />

Open in new window

0
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hello Zolf,
you are not referencing the Bootstrap correctly...

in your HEAD the code should look like below near the line where you added the CSS style - means add the bootstrap.min.css before your style.

   
<link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet" />

Open in new window


then at the end of document... before the </body>  tag, you code should look like this:

<!-- jQuery for Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Open in new window


after making these changes you will start seeing the Glyphicons in your page.

Thanks,
Prasadh
0
 
Prasadh BaapaatWeb Designer & DeveloperCommented:
in above code I have referenced the Jquery from CDN, you can reference it from your local JS folder also.
0
 
zolfAuthor Commented:
thanks
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now