Html 图标未嵌入到搜索栏中，且位于div之外

我有一个搜索栏，我正试图嵌入一个字体很棒的图标，但它似乎没有包装在容器div中

这是一个显示图标当前所在位置的图像，我希望搜索图标能够显示

任何帮助都将不胜感激，谢谢

CSS:

HTML:

您应该将输入包装在一个div上，将该div准确地定位在您希望文本输入的位置，然后将该div设置为相对位置。同时将您的图标放置在此分区内

另一方面，如果你的图标是为了提交而点击的，不要使用span，或者使用“按钮”标签或者实际的输入类型：submit
谢谢你的回复，我已经尝试用div
来包装输入，请你详细说明我如何正确包装它？再次感谢这是完美的！非常感谢！
 @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");


    .searchbar{
            position:relative;

        }

        .searchbar input { text-indent: 32px;}
        .searchbar .fa-search { 
          position: absolute;
          top: 10px;
          left: 10px;
            color: #4f5b66;

        }

.search_field {
    min-width: 270px;
    width: 65%;
    height:40px;
    font-size: 2em;
    behavior: url(js/PIE.htc);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
    margin-right: -4px;
    margin-top: 10px;
    float:right;
}

<div class="searchbar">
   <form method="GET" action="search.php" style= "padding: 1px; font-family: Tahoma, Geneva, sans-serif;">
                <span class="fa fa-search fa-lg"></span>
                <input type="text" name="search" class="search_field" value="<?php echo $_GET['search']; ?>" id="search" maxlength="20" />
                <input type="hidden" name="start" value="0" />
                <input type="hidden" name="limit" value="10" />
    </form>
</div>