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 style the tick mark checkbox using css without using images?

    How to manage z-index of navigation menu?

    How to get the value of last assigned property in Sass or CSS?

    How the licensed web font is getting rendered?

    Show header when at top of page - Scroll event re-firing issue

    How to align text and buttons next to canvas (WebGL + JavaScript + CSS)

    How to position three divs horizontally

    Show bigger image on thumbnail's hover

    CSS Border-Radius Shows Parent's Style

    How to select not first tr and not last td

    How to create a circle and a bar that overlap with css?

    How to share common css and other resources among grails projects?

    How to build a mobile version of a non-mobile website? [closed]

    How do I minify CSS and Javascript? [duplicate]

    How to align image to the right?

    CSS Sprites - How to leave Hover button in depressed state

    Content property in CSS - how to put content into several paragraphs

    How to insert HTML symbol after Bootstrap panel-heading in CSS?

    How to toggle two buttons on mouse hover?

    How to call image on css?

    How to get GWT console/development mode to generate css errors?

    How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

    How to make a div fall on hover and stay at at the bottom of the page using jquery or css?

    How to view browser's calculated CSS specificity?

    How to set CSS class file to a Menu item control

    How to transform an image in SVG (or CSS) into a non-parallelogram shape?

    How to force li elements to scroll horizontally and should be able to accommodate all the li elements in only one single line using css

    How are CSS elements combined

    Show outlines around divs in a web-based HTML editor, a la Dreamweaver and other editors

    How to position a label using css relative to an absolute positioned input box