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 to use CSS in ASP.NET application

    How to override xhtml theme css?

    How to prioritize a CSS class?

    How do I (by default) style different types of labels differently?

    How to change width to fill the remaining space (CSS)

    How do I style hyperlinks separately, using CSS?

    CSS how to have two divs to the right of one div but not beside each other

    onsen ui 2 : how to implement android style scrollable tabbar?

    How to reference / link to a Css-File styling elements in a webview for Android

    How to set the css properties with its own data-attributes?

    How to add 10 pixels to a dynamic top position in CSS using SASS

    How to change the colors of a website in real time?

    How to minify and combine commented out css files

    how to change button icon on click?

    How do I make this sprite behave how I want?

    How to style first paragraph

    of the content differently without using css class , ID or javascript, with IE6 compatibility?

    How to give hover effect to next div using css

    how to apply div on hover my table td

    How to align HTML elements from bottom to top?

    How to reveal part of blurred image where mouse is hovered?

    How to select nth line of text (CSS/JS)

    How to remove a specific (bottom) border from p:row in p:panelGrid?

    How to make a pure css based dropdown menu?

    Showing required fields by bolding

    How to make one file compatible with different browsers?

    Vertical alignment in css of multiple elements (How to achieve this layout)

    How to maintain the background image until end of the page

    How to use CSS calc according to a certain amount of li's?

    CSS/XHTML: Show div after a specific count of table rows

    How to add another line on overflow in a text input?