html - 如何在输入标签中设置 Font Awesome 图标

Question

输入标签和图标的代码如下:

<input type="email" placeholder="Username" id="tutu" required />

CSS

#tutu{
    border-radius: 3px;
    border: 1px silver solid;
    padding-left: 10px;
    font-weight: bolder;
    color: #bcbcbc;
    height: 40px;
    width: 350px;
}

Answer 1

尝试像这样将输入和图标包装到父 div 中

<div class="tutuclass">
    <input type="email" placeholder="Username" id="tutu" required />
    <i class="fa fa-user"></i>
</div>

然后如下更改css

.tutuclass #tutu{
    border-radius: 3px;
    border: 1px silver solid;
    padding-left: 10px;
    font-weight: bolder;
    color: #bcbcbc;
    height: 40px;
    width: 350px;
}
.tutuclass .fa {
    margin: auto -30px;
}