码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap在input框中加入icon图标

时间:2018-05-03 20:54:05      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:text   group   get   top   com   一个   png   忘记   BMI   

<form class="form-horizontal">
    <div class="form-group has-feedback">
        <div class="username">
            <span class="fa fa-user-circle-o fa-2x form-control-feedback"></span>
            <input type="text" class="form-control" id="inputPassword" placeholder="用户名">
        </div>
    </div>
    <div class="form-group pwd-top has-feedback">
        <div class="password">
            <span class="fa fa-unlock-alt fa-2x form-control-feedback"></span>
                <input type="password" class="form-control" id="inputPassword" placeholder="密码">
            </div>
    </div>
    <div class="form-group">
                        
        <div class="checkbox  col-sm-4 col-md-4 col-lg-4">
            <label>
                    <input type="checkbox"> 记住密码
                </label>    
            </div>
        <label for="" class="col-sm-4 col-md-4 col-lg-4 control-label forget-pass"><a href="">忘记密码</a></label>  
        <label for="" class="col-sm-4 col-md-4 col-lg-4 control-label register"><a href="">注册</a></label>
    </div>
    <div class="form-group">
        <button class="btn btn-login" type="submit">&nbsp;</button>
    </div>
</form>

实际效果

技术分享图片

对css样式进行修改,才能使icon图标垂直居中,然后居左
下面的line-height: 50px,因为我的input框是50px高

然后这利的left:20px 如果你不给,icon图标就是靠右对齐

/*padding-left:60px   因为图标是有一个宽度,然后图标有一个left:20px   图标的宽度34px, 估计一下  设置差不多60px, 刚好让文字不被图标遮挡*/
.form-center .username input,.form-center .password input{
    height: 50px;
    padding-left: 60px;
}


.form-control-feedback {
    line-height: 50px;
    left: 20px;
} 

bootstrap在input框中加入icon图标

标签:text   group   get   top   com   一个   png   忘记   BMI   

原文地址:https://www.cnblogs.com/xiaqilin/p/8987183.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!