Css Boostrap glyphicon位于文本字段之外

我试图在输入字段内有一个glyphicon，但由于某些原因，它在文本框外

<!-- 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 -->

输入您的号码，我们会给您发一条链接

电话号码
或访问应用商店立即下载

看起来按钮上有一个图标。你可以试试这样的

<input type="text" class="form-control phone-txt" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-arrow-right"></span></span>

在文本字段中添加什么图标表单中的按钮w/span元素insiden未完成，但您得到的图片是：它仍然在输入文本字段之外。我在项目的文件夹中有glyphicon的附件。我不知所措，我有表格，还有一个输入“文本区”，我所要做的就是在“文本区”内有一个提交按钮。如果你看小提琴，你会在输入字段中看到图标。为了给它一个动作，您可能需要使用一些在onclick事件上触发的javascript。我从来没有这样做过，但我不明白为什么它不起作用。我编辑了小提琴，onclick事件确实可以处理span元素……非常感谢@kirkb。当然，很高兴我能帮上忙。你介意选择这个答案吗？？谢谢，柯克