[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Glyph icons in Bootstrap 3

Posted on 2016-11-28
4
Medium Priority
?
144 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 9

Assisted Solution

by:Mukesh Yadav
Mukesh Yadav earned 800 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 1200 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying 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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

590 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