Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Craig Watson
Craig Watson
27,930 Points

Glyphicon Showing as light grey box...?? Bootstrap

Hi everyone I'm following along with the frameworks css course and for some reason my glyphicon is not showing correctly...

I put my code through HTML validator on w3 and it came back fine.. any help will be very much appreciated! I have even copied an example span element from getbootstap still no joy...

below is my full code ....

<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/my-styles.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!--Navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <a class="main-logo pull-left" href="#">Ribbit</a>
        <p class="navbar-text pull-right hidden-xs">A Treehouse Project</p>
      </div>
    </div>
    <!-- End navbar -->

    <!-- Jumbotron -->
    <div class="jumbotron">   
        <div class="container"><!-- Container -->        
            <div class="row"><!-- Row -->  

                <div class="col-sm-6"><!-- Col -->            
                    <h1>Self-destructing messages are only a hop away.</h1>
                    <p class="lead">
                        Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!
                    </p>
                    <p class="lead">
                        Or download the app and try it first.
                    </p>
                    <p class="lead">
                        <a class="btn btn-default btn-lg" href="#">iOS</a>
                        <a class="btn btn-default btn-lg" href="#">Android</a>
                    </p>            
                </div><!-- End Col -->  

                <div class="col-sm-6 hidden-xs"><!-- Col -->
                    <div class="device pull-right">              
                </div>  

                </div><!-- End Col -->          
            </div><!-- End Row -->        
        </div><!-- End Container -->      
    </div>
    <!-- End Jumbotron -->

    <!-- Main Content -->
    <div class="container">

        <div class="row ft"><!-- Row -->  

            <div class="col-sm-6 hidden-xs">
                <div class="ft-icon camera img-rounded"></div>
            </div>

            <div class="col-sm-6 ft-copy">
                <h2>Securely delete photos &amp; video based on a timer</h2>
                <p>
                    Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct."
                </p>
            </div>

        </div><!-- End Row --> 


        <div class="row ft"><!-- Row -->  

            <div class="col-sm-6 ft-copy">            
                <h2>Build an easily managed friends list</h2>
                <p>
                    Learn what Parse.com offers as a "backend-as-a-service" platform. Explore the user account management APIs provided by Parse.com and write the code to create and save a new user in a Parse.com data store. 
                </p>
            </div> 

            <div class="col-sm-6 hidden-xs">
                <div class="ft-icon friends img-rounded"></div>
            </div>

       </div><!-- End Row --> 

        <div class="row ft"><!-- Row -->  

            <div class="col-sm-6 hidden-xs">
                <div class="ft-icon cloud img-rounded"></div>
            </div>

            <div class="col-sm-6 ft-copy">            
                <h2>Store &amp; retrieve data using cloud servers</h2>
                <p>
                    We'll teach you how to upload images, video files, and messages to Parse.com's cloud servers. Then learn how to retrieve the data by setting up custom queries that download and display them in the app. 
                </p>
            </div>            

        </div><!-- End Row -->

        <!-- Panel -->
        <div class="panel panel-default hidden-xs">

            <div class="row"><!-- Row -->

                <div class="col-sm-5 col-sm-offset-1">
                    <form>
                        <p><strong>Enter your number and we'll text you a link</strong></p>
                        <label class="sr-only">Phone Number</label>
                        <input class="form-control phone-txt" type="text" placeholder="Phone Number">
                        <button class="btn btn-submit" type="submit">
                        <span class="glyphicon glyphicon-arrow-right"></span>
                        </button>
                    </form>
                </div>

                    <p>
                        <strong>Or visit an app store to download now!</strong>
                    </p>
                    <a class="btn btn-default btn-lg" href="#">iOS</a>
                    <a class="btn btn-default btn-lg" href="#">Android</a>   

            </div><!-- End Row -->

        </div>
        <!-- End panel -->




    </div>
    <!-- End Main Content -->

  </body>
</html>

Any help as mentions is going to be very much appreciated !!!

Craig

Craig Watson
Craig Watson
27,930 Points

After scrolling the internet for answers I found that when downloading a customized version of bootstap the fonts can be a little buggy.

Best thing to do and what I had to do to correct the problem is download the full original bootstrap files and replace the font files works a charm!

Craig

1 Answer

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

That's usually a case of the font file (glyphicon-halflings) not being loaded. Do you have the bootstrap fonts folder in the right location?

Craig Watson
Craig Watson
27,930 Points

Hi Colin,

I have the fonts folder in the main directory with index.html and img folder and so on, is that correct I left it as downloaded form getbootstrap but it does seem as though its a broken link.

Can I download the glyphicon folder separately and replace it .... ?

I'm not sure what to do really I've tried lots of things and don't want to discard the issue I'd rather get to the bottom of it before I move on.

Thanks Craig