如何在input标签内嵌入图标？Bootstrap自定义样式下图标居底问题解决

我帮你搞定这个图标跑偏的问题～咱们先看看问题出在哪：你自定义的.form-login样式里，设置了height: auto、padding: 0px，而且只有底部边框，这就导致输入框的高度完全靠文字撑起来，而右侧的input-group-text默认带有内边距和固定行高，两者高度不匹配，图标自然就跑到底部去了。

下面给你几个可行的修复方案：

方案1：统一内边距，匹配Bootstrap默认规则 #

直接给.form-login加上Bootstrap原生form-control的内边距，让输入框高度和图标容器对齐：

.form-login{
    display: block;
    width:100%;
    font-size: 1rem;
    font-weight: 400;
    line-height:1.5;
    border-color: #009DA9 !important;
    border-style: solid !important;
    border-width: 0 0 1px 0 !important;
    /* 新增：添加默认内边距 */
    padding: .375rem .75rem !important;
    color:black;
    height: auto;
    border-radius: 0;
    background-color: #fff;
    background-clip: padding-box;
}

方案2：强制图标垂直居中（保留0内边距的情况下） #

如果你不想给输入框加内边距，那可以给右侧的图标容器设置垂直居中对齐，同时调整样式和输入框统一：

.form-login{
    /* 保留你原来的样式 */
    display: block;
    width:100%;
    font-size: 1rem;
    font-weight: 400;
    line-height:1.5;
    border-color: #009DA9 !important;
    border-style: solid !important;
    border-width: 0 0 1px 0 !important;
    padding: 0px !important;
    color:black;
    height: auto;
    border-radius: 0;
    background-color: #fff;
    background-clip: padding-box;
}

/* 新增：让图标容器垂直居中并统一样式 */
.input-group-text{
    align-self: center;
    border: none; /* 去掉默认边框，和输入框样式统一 */
    background: transparent;
}

额外优化建议 #

如果只保留底部边框，建议给整个input-group加上底部边框，而不是只给输入框加，这样视觉上更完整：

.input-group{
    border-bottom: 1px solid #009DA9;
}
.form-login{
    border-width: 0 !important; /* 去掉输入框自己的底部边框 */
}

这样调整后，图标就能和输入框的文字垂直对齐啦～

内容的提问来源于stack exchange，提问作者Alghany Jagad