Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Framework Basics Build a Website with Bootstrap Building the Form and Button Panel

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!

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

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

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

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

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.

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

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

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

Can send you the complete HTML code?

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.

I tested on my computer and everything works fine.

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

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>