Solved

Glyph icons in Bootstrap 3

Posted on 2016-11-28
4
56 Views
Last Modified: 2016-11-28
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
Comment
Question by:zolf
  • 2
4 Comments
 
LVL 8

Assisted Solution

by:Mukesh Yadav
Mukesh Yadav earned 200 total points
ID: 41905227
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
 
LVL 10

Accepted Solution

by:
Prasadh Baapaat earned 300 total points
ID: 41905228
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
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41905230
in above code I have referenced the Jquery from CDN, you can reference it from your local JS folder also.
0
 

Author Closing Comment

by:zolf
ID: 41905244
thanks
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question