bootstrap~在input框中加入icon图标

最新推荐文章于 2025-05-31 14:52:22 发布

zf18234031156

最新推荐文章于 2025-05-31 14:52:22 发布

阅读量1.2w

点赞数 3

分类专栏：前端文章标签： bootstrap~在input框中加入icon图标

本文链接：https://blog.csdn.net/zf18234031156/article/details/99329217

版权

前端专栏收录该内容

23 篇文章

订阅专栏

今天在bootstrap前端框架中这样一个需求，在input框的前一部分展示图标，如下图：

解决方式：

在input前面添加span标签，span通过class 设置bootstrap组件图标。配合form-control-feedback将图标显示在input内。但是这时显示在input的后端。打开f12，可以发现.form-control-feedback{}的选择器是相对定位的，通过调节将其调到需要展示的位置。

代码展示：

<form class="form-horizontal" id = "my_form_active">
    <div class="form-group">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
            <input type="text" class="form-control form-control-pl-30" name = "name"      placeholder="参会人员姓名">
        </div>
    </div>
</form>

主要通过：form-control-feedback 实现。

参考：https://www.cnblogs.com/xiaqilin/p/8987183.html