Solved

Glyph icons in Bootstrap 3

Posted on 2016-11-28
4
76 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 9

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

729 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