###### tags: `css`

# form輸入框裡面插入fontawesome
<p>搭配bootstrap使用</p>
<p>1.純bootstrap</p>

 <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  
</form> 

<p>2.在<input type>外面包一個 < di v > 給他一個class設定相對定位 </P>

<div class="form-group">
<label for="exampleInputEmail1">Email address</label>

 <div class="tag">
 <input type="email" class="form-control form_email" 
 id="exampleInputEmail1" aria-describedby="emailHelp" 
 placeholder="Enter email ">
                                              </div>
                                             </form> 

<p>3.設定class="tag"的css和用偽元素插入fontawesome</p>

.tag{
    position: relative;
   
}

.tag:before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f0e0";
    font-size: 14px;
    position: absolute;
   margin-top: 10px;
   margin-left: 5px;
   color:#6c757d ;
  }

<p>4.修改placeholder位置,使用<kbd> text-indent</kbd>首行縮排</p>

  .tag input {
    text-indent: 10px;
  }

[##### h5 CSS: 偽元素應用- input icon](https://ithelp.ithome.com.tw/articles/10200426?sc=iThelpR)