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 Framework Basics Build a Website with Bootstrap Building the Form and Button Panel

Trent Burkenpas
Trent Burkenpas
22,388 Points
Posted by Trent Burkenpas
Trent Burkenpas
22,388 Points

My glyphicon is showing up like a grey box. What is going on?

my html code 

<!-- Panel -->
      <div class="panel panel-default hidden-xs">
        <div class="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>
          <div class="col-sm-5">
            <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>
        </div>
      </div><!-- End panel -->

Any advices would be great Thanks!

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Trent,

What was the error you spotted as im having the same issue I've even copied a new SPAN example straight from getbootstrap still no joy .....

Any help will be much appreciated!

Craig

Sean Johnston
Sean Johnston
1,477 Points

I've figured it out!

Some early versions of the download files have bugged glyphicon fonts. I'm not sure why. I ran a git diff on the two sets of files (3-2 and 3-7, to be exact), and I got the changes you would expect, but it also said that all 4 font files had changed. git can't show the details of the binary changes. Switching the fonts folder from one into the other either replicated the issue or fixed it, depending on which one I tried. This seems to fix the grey box arrow bug.

8 Answers

Robert Kolstad
Robert Kolstad
16,924 Points
Robert Kolstad
Robert Kolstad
16,924 Points

Guil usually adds work in the download files from each video to the next. The video sometimes will not make mention of these changes. In this case, if the new css files were not downloaded or updated, the glyphicon would show up as a rectangle and towards the bottom left. For the form, this css is included in the video file downloads:

/*Forms */

phone-txt { padding: 24px 12px; width: 90%; }

.btn-submit { color: inherit; font-size: 1.6em; background: transparent; position: absolute; right: 55px; bottom: 3px; }

/* Buttons */ .btn:active { box-shadow: none; } .panel .btn-default:hover { background-color: #ccc; color: #f7f7f7; border-color: #ccc; }

Tim Smith
Tim Smith
6,069 Points
Tim Smith
Tim Smith
6,069 Points

Thanks Robert, I would have never found these missing CSS properties without your help!

Placid Rodrigues
Placid Rodrigues
12,630 Points
Placid Rodrigues
Placid Rodrigues
12,630 Points

I was facing the same problem. I searched around and found that problem exists in the font files downloaded after customizing bootstrap.

To solve it, download bootstrap without customizing and use font files from there.

Credit goes: http://stackoverflow.com/a/18474869/2407971

Hope that helps someone with the same problem.

deborahtruitt
deborahtruitt
210 Points
deborahtruitt
deborahtruitt
210 Points

I did what Sean suggested and replaced the font files and it solved the problem for me.

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

The grey is the button color.If you change the class to btn-succes the color is green.

Trent Burkenpas
Trent Burkenpas
22,388 Points
Trent Burkenpas
Trent Burkenpas
22,388 Points

I understand that, but the arrow itself is not showing up. I looks like a square.

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

Can send you the complete HTML code?

Trent Burkenpas
Trent Burkenpas
22,388 Points
Trent Burkenpas
Trent Burkenpas
22,388 Points

I figured it out, I had a small typo in my html code. But thanks for your help and time.

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

I tested on my computer and everything works fine.

Jason Mc Dermott
Jason Mc Dermott
11,496 Points
Jason Mc Dermott
Jason Mc Dermott
11,496 Points

I'm having the same problem my html is just the same as above. Its showing as a box regardless and its sitting below the field on the left..?

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

I am having the same problem. Did anyone figure it out ?

<div class="row">
        <div class="col-sm-5">
          <form>
            <p><strong>Frankfurter fatback tail bresaola landjaeger.</strong></p>
            <label class="sr-only">Phone number</label>
            <input type="text" class="form-control phone-txt" placeholder="Phone Number">
            <button type="button" class="btn btn-submit" type="submit">
              <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
            </button>
          </form>