input 加入 Icon 的兩種寫法

方法一 | Fontawesome 範例

• input前方加入 Fontawesome copy HTML (下有示意圖)
• 在用 relative 與 absolute 把icon定位於 form 內
• 此方式點選表格要填寫時， 前方的 icon是不會消失的，只有placeholder="信箱" 會消失。

<div class="inputwithIcon">  
  <input type="text" placeholder="Email">
  <i class="fas fa-envelope fa-lg"></i>
</div>
<div class="inputwithIcon">  
  <input type="text" placeholder="Booking">
  <i class="fas fa-book fa-lg"></i>
</div>

*,*:before,*:after{
    box-sizing: border-box;
}
.inputwithIcon{
  margin:1rem;
  position:relative;
  input[type="text"]{
  width: 50%;
  border:2px solid #BCA7A7;
  color:#BCA7A7;
  border-radius:3px;
  outline:none;
  padding:.5rem 0 .5rem 2.5rem;
    &::placeholder{
      color:#BCA7A7;
    }
    &:focus{
      border-color:#B2998E;
      box-shadow:0 0 8px 0 #B2998E;
      &+ i{
        color:#B2998E;
      }/*i寫在input下在一起設定按下會有陰影較方便*/
    }
  }
  i{
    position:absolute;
    color:#BCA7A7;
    left:.5rem;
    top:.6rem;    
  }
}

// Fontawesome copy HTML 示意圖

方法二 | 使用 Bootstrap 的 Fontawesome 範例

• 進入 Bootstrap 的 Fontawesome 選擇 icon，點選 copy / Uncicode HTML Entity 即複製成功→  記得把後面的分號拿掉。
• 複製的 Uncicode HTML Entity 放入 placeholder 內。
• 點選form 輸入字時，placeholder 內的icon和字皆會消失。缺點 : icon 數量有限。

<!--CDN-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 

<div class="inputwithIcon">  
  <input type="text" placeholder="&#xf003 Email">
</div>

.inputwithIcon{
  margin:1rem;
  input[type="text"]{
    display:inline-block;
    width: 50%;
    font-family: FontAwesome;
    font-weight: 700;
    font-size: 1.2rem;
    padding:.5rem;
    outline:none;
    border:2px solid #a1bad0;
    border-radius:4px;
    color: #3f3f3f;
    &::placeholder{
      color: #a1bad0;
    }
    &:focus{
      box-shadow:0 0 5px 0 #a1bad0;
    }
  }
}

// Bootsreap Fontawesome copy Unicode HTML 示意圖