trying to put an icon font Inside of my button - html

Question

I´m trying to put an icon font inside my search input at the right side.
I´m putting the icon font <i class="fa fa-search-plus"></i> inside my <button> tag, but the icon font is appearing at the right of my search input and not inside the input at right.
Somebody there can see what is happening?
My jsfiddle with the problem:
http://jsfiddle.net/ritz/ZNb5r/ (I try to link the "font-awesome.min.css" into the jsfiddle but I think its not working)
My html:
<li style="float:right; list-style:none; height:20px;">
<form id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
<button type="submit"><i class="fa fa-search-plus"></i></button>
</form>
</li>
My css:
#search
{
margin-top:8x;
margin-top:8px;
outline:none ;
border:none ;
}
#search input[type="text"]
{
border: 0 none;
font: 12px 'verdana';
background: brown;
text-indent: 0;
width:110px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus
{
background: #141d22;
color: #fff;
width: 170px;
outline:none;
color:000;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
button[type="submit"]>i:hover
{
color: #fff;
}
button[type="submit"]>i
{
background:none;
color:#ccc;
font-size:1.5em;
}

Answer 1

The icon will not appear inside your input, because your button is not and can not be nested inside an input.
To make your button appear inside the input, try this:
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#search input[type="text"] {
padding-right: 20px;
}
#search button[type="submit"] {
margin-left: -20px;
width: 20px;
}
</style>
You may have to tweak margins and paddings to get it to work properly. To eliminate some trouble, I've added box sizing. Why?
[By default] The width and height properties are measured including only the content, but not the border, margin, or padding.
When you use border-box, however,
The width and height properties include the padding and border, but not the margin.
(See MDN's article on box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)

Answer 2

You just aren't linking to the font-awesome css file correctly. Here is my fiddle with it working properly.
To make it work all I did was link it to the CDN by adding this http://www.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css to external resources.

Answer 3

Put some height and width in the button tag should sholve your issue. Then make an icon as background-image. You may not have to put i tag on it, see my Fiddle using an input tag and background-image as icon.