<input class='phone-input' type="text" id="phone"/>
.phone-input{
padding-right:20px
background:url("resource/***.gif") no-repeat scroll right center transparent
}
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>input 框前面放图片</h2>
<div>
<span class="glyphicon glyphicon-zoom-in"></span><input type="text"/>
</div>
</div>
</body>
</html>
引入bootstrap中css样式，如果图标不是你想要的，你可以根据class="glyphicon glyphicon-zoom-in" 这个样式自己修改，放自己的图片。这里我只是给你举个例子。
这个很简单，我来教你：<body>
<p>提问百度知道</p>
</body>
<style>
p{ font-size:16pxline-height:2background:url(...你要加的图片) no-repeat left centerbackground-size:16pxpadding-left:20%} //'padding-left:20%'这个值是不固定的，看你图片多大
</style>
如有疑问可以追问我，望采纳
