如圖，為一個搜索框添加一個放大鏡形狀的小圖標，點擊小圖標能夠submit表單
方法1：
參考:https://stackoverflow.com/questions/48042213/how-to-use-fontawesome-icon-as-submit-button-in-html-form
修改input屬性。代碼如下：
HTML結構：
<body>
<div class="search">
<form action="search" target="_blank">
<input type="text" name="search" placeholder="搜索">
<input style="font-family: icomoon" value="" type="submit" >
</form>
</div>
</body>
1、直接為input添加font-family屬性，把value設定成"&#x對應圖標的編碼"。
<input style="font-family: icomoon" value="" type="submit" >
2、然后用CSS為圖標設定樣式。
.search input[type="submit"] {
/* 把submit按鈕調整到和圖標大小相同 */
width: 20px;
height: 20px;
font-size: 20px;
border: 0;
background-color: transparent;
position: absolute;
right:12px;
top:50%;
transform: translateY(-50%);
/* 鼠標移上去有點擊提示 */
cursor:pointer;
}
方法2：
在div::after插入一個圖標，定位到目標位置。
1、HTML結構不變，把input的value設置為空：
<input value="" type="submit" >
2、在div后面插入圖標
div::after{
font-family: "icomoon";
font-size: 20px;
color: #000;
content:"\e986";
position: absolute;
right:12px;
top:50%;
transform:translateY(-50%);
/* 加上這一句,圖標就不會擋住點擊按鈕,達到點擊圖標就能submit的效果,
參考：
https://stackoverflow.com/questions/28284105/font-awesome-icon-and-text-in-input-submit-button
*/
pointer-events: none;
}
3、把submit按鈕設置成和圖標一樣的大小，並且用定位使圖標和submit按鈕重合
.search input[type="submit"] {
width: 20px;
height: 20px;
border: 0;
background-color: transparent;
/* 鼠標移上去有點擊提示 */
cursor: pointer;
position: absolute;
right:12px;
top:50%;
transform:translateY(-50%);
}