Solved

Glyph icons in Bootstrap 3

Posted on 2016-11-28
4
37 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 6

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 9

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 9

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now