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

HTML

Freddy Heppell
Freddy Heppell
9,753 Points
Posted by Freddy Heppell
Freddy Heppell
9,753 Points

Bootstrap Glyphicon Not displaying & Question

I've got to 'Building the Form and Button Panel' in the Building a bootstrap site tutorial. This code is supposed to display a button with an arrow, but it just displays an empty white box:

Also I have a question in regard to the way the code is written, Why on earth would you want to hide the download button on a mobile device? I realize it may be covered in a later tutorial but it just seems weird!

    <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 type="submit" class="btn btn-submit"><span class="glyphicon glyphicon-arrow-right"></span>    </button>
              </form>

4 Answers

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

You also need to link to the glyphicon files in the css like so 

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

or in the HTML

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Also for the forum markdown use blank line then 3 back ticks then code then 3 more back ticks then another blank line.

Freddy Heppell
Freddy Heppell
9,753 Points
Freddy Heppell
Freddy Heppell
9,753 Points

EDIT: Fixed all of these issues

Okay, thanks. (Important Note: If you're not using a web server, change // to http://).

The arrow is however very dark, way more so than expected. This is my relevant css:

/* Form
================================= */

.phone-txt {
    padding: 24px 12px;
    width: 90%;
}
.btn-submit {
    color: inherit;
    font-size: 1.6em;
    background: transparent;
    position: absolute;
    right: 55px;
    bottom: 3px;
}

Actually, now that I remember, I used the download that was given after the customization stage. So surely that would be unaffected by any changes to bootstrap?

Freddy Heppell
Freddy Heppell
9,753 Points
Freddy Heppell
Freddy Heppell
9,753 Points

That code is displaying strangely... I've put it on a pastebin: http://pastebin.com/N7W3VbQj

Also, the code block isn't ending, even though I put 3 backticks at the end...

Freddy Heppell
Freddy Heppell
9,753 Points
Freddy Heppell
Freddy Heppell
9,753 Points

And now icomoon is failing to work... My css is

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

    [data-icon]::before{
    font-family: 'icomoon';
    content: attr(data-icon);
    margin-right: 8px;
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

And my HTML is:

<p class="lead">
                <a class="btn btn-default btn-lg" data-icon="&#e600;" href="#">iOS</a>
                <a class="btn btn-default btn-lg" data-icon="&#e601;"href="#">Android</a>
              </p>