how to append an icon to an input search?


Tags: css3,twitter-bootstrap,font-awesome

Problem :

I am trying to append an icon to an input.

with font awesome is possible to attach that icon on the value of the input, like this:

<input class="btn" type="submit" value="&#xf090;">

where value="&#xf090;" is the equivalent of <i class="fa fa-sign-in"></i>, that is perfect so far, but I need that icon to be bigger, how can I accomplish that ? or what is the other way to attach that icon the input ?

and css

input[type="submit"] {
    font-family: FontAwesome;
}

and the icon must be attached to the left.



Solution :

I would use <button type="submit"></button>

@font-face {
  font-family: FontAwasome;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/fonts/fontawesome-webfont.woff");
}

.sign-in:after {
  content: '';
  display: inline-block;
  font-family: FontAwasome;
  font-size: 2em;
  line-height: 2.75rem;
  height: 2.75rem;
  vertical-align: top;
}

button {
  background-color: blue;
  border: none;
  color: white;
  min-height: 2.75em;
  margin: 0;
  padding: 0 1em;
}
<button type="submit" class="sign-in"></button>


    CSS Howto..

    How does *, *:after, *:before work?

    Click radio button then show submit button

    How to make a CSS border for a dropdown menu?

    How to combine multiple css framework with overpalling classes

    How to create new div immediately next to image like on Facebook's news feed on right side of page?

    How can i overlap inline divs?

    How do I apply desktop media queries style to IE?

    How to get the effect not to add one more div?

    How can I put an input element on the same line as its label?

    How do I load a CSS file with HTMLTextWriter

    CSS HTML How to make a larger image than div display in full in div

    How can I achieve this layout using CSS only?

    how to add a different text box in input text type

    How to create dropdown navigationbar without float?

    how to use CSS opacity to let background bleed through in IE8?

    How to reduce the indentation between first and second line inside circle?

    How to create a loading image sprite using background position

    How To Apply jQuery CSS Selector

    How can I use :hover with multiple classes

    Loop in Sass @for how to use $#{value}#{$i} correctly?

    How to I get this element to span 100% of LI? [closed]

    How to make my dynamic table scrollable when mouse clicked?

    how to change the background color of the holder of an image using jquery cycle

    How to apply CSS color on parent element using a color picker?

    HTML CSS, how to create a Side bar or column

    How to build a special polygon (a kite shape) with HTML & CSS only?

    How to highlight table rows if error is found - Jquery

    How to trigger self hover on child element

    How to Stop Overriding of Bootstrap Css Styles

    How to make Internet Explorer 8 to support nth child() CSS element?