在input按钮里添加字体图标
如图，为一个搜索框添加一个放大镜形状的小图标，点击小图标能够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%);
}
