Twitter bootstrap overflow input append with icon

Question

I want to create a really nice contact form with icons and full width input fields (span12).

I use these frameworks:

• Twitter bootstrap
• Font Awesome 3.0
• jQuery

But the input fields extend/overflow the amount of the icon. Please help!

    <div class="row">
        <div class="container">
            <h1>Contat us</h1>

                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-user"></i></span>
                            <input class="span12" placeholder="Full name" id="inputIcon" type="text" required="required">
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-envelope"></i></span>
                            <input class="span12" placeholder="Your Email" id="inputIcon" type="email" required="required">
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-phone"></i></span>
                            <input class="span12" placeholder="Telephone" id="inputIcon" type="tel">
                        </div>
                    </div>
                </div>

                <div class="btn-toolbar">
                  <div class="btn-group" required="required">
                        <button class="btn" href="#"><i class="icon-coffee"></i> Question</button>
                        <button class="btn" href="#"><i class="icon-plus-sign-alt"></i> Suggestions</button>
                        <button class="btn" href="#"><i class="icon-stethoscope"></i> Product Support</button>
                        <button class="btn" href="#"><i class="icon-suitcase"></i> Job application</button>
                    </div>
                </div>



                <div class="controls">
                    <textarea id="message" name="message" class="span12" placeholder="Your Message" rows="5" required="required"></textarea>
                </div>

                <p>
                <label class="checkbox">
                    <input type="checkbox"> Sign up for our newsletter
                </label>
                <button class="btn btn-primary" type="button">Send</button>
                </p>
            </div>
    </div>

Answer 1

Seems to look fine on Bootply (http://bootply.com/60556) How are you including bootstrap.css, bootstrap-responsive.css, font-awesome, etc..?

EDIT - Ah, now I see the problem. This maybe a Bootstrap bug. A workaround would be to override the input.span12 CSS like this:

.input-prepend input.span12  {
    width: 1129px;
}

I updated the demo