maadi maadi - 15 days ago 5
CSS Question

how to place icon inside input tag in asp.net mvc5?

I am new to asp.net mvc5. I was trying to put search icon inside search bar but it appears outside the bar. can any one tell the solution? here is snapshot and code.
enter image description here

and code is here..

<div class="banner-g">
<div class="container">
<div id="user-info">
<div class="navbar-form navbar-right">
<form action="/home/browse" id="searchForm" method="get">

<div class="inner-addon left-addon">
<a href="#" id="submitSearch" style="text-decoration: none; right: 14px; color: rgb(204, 204, 204); top: 6px; "> <i class="glyphicon glyphicon-search"></i></a>
<input class="form-control input-sm" data-val="true" data-val-length="The field Search must be a string with a maximum length of 150." data-val-length-max="150" data-val-regex="Please only use letters, numbers, spaces, periods, commas, question/ exclamation marks, dollar sign, underscores, hyphens, apostrophes, parentheses, forward and back slashes, colon and semi colons" data-val-regex-pattern="^[0-9a-zA-Z/&#39;() .,!?$:-;_-]+$" id="Search" name="Search" placeholder="Search Markets" type="text" value="" />
&nbsp;

<input type="hidden" name="isSearch" value="true">
</div>

</form>

</div>
</div>
</div>
</div>


and in bootstrap file

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
}


I will be thankful for help.

Answer

You should look into using the Bootstrap input group component. You can find it documented here.

Like this:

<div class="input-group">  
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  <span class="input-group-addon glyphicon glyphicon-search" aria-hidden="true"></span>
</div>

Here is a demo.

Comments