我尝试将字体很棒的图标转换为文本输入类型。
但可以得到想法，但它不起作用。
它将如下图所示。
.search_location{
padding: 9px 10px 8px 10px;
background: #fff;
color: #777777;
position: relative;
}
i.icon-map-marker
{
position: absolute;
top: 10px;
left: 50px;
}
<p>
<input type="text" class="search_location" value="Choose Location">
<i class="icon-map-marker"></i>
</p>
你可以试试这个：
p{
position: relative;
font-family: 'FontAwesome';
}
p::after{
position: relative;
left: -20px;
content: "\f002";
}
input{
padding-right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>
<input type="text" class="search_location" value="Choose Location">
</p>
Where content是你的图标unicode。您必须指定font-family所以它也使用font awesome（unicodes 可以在他们的图标页面上找到）。
https://jsfiddle.net/h6877894/2/ https://jsfiddle.net/h6877894/2/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
