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..

    Show HTML text if window width is too small with CSS

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more

    How to color the Horizontal and Vertical Lines at (0,0) darker in JavaFX

    How to stop CSS element style from getting into my class style?

    How to show scrollbar when the inner content is aligned to bottom?

    loading images to show them offline

    how to center text and control user zoom in CSS

    How To Center a Letterpress Effect?

    How to accomplish this layout in HTML/CSS?

    How to prevent randomly positioned images from overlapping using Angular

    How to edit a css file in ASP.NET using C# to change the website design

    PHP: How to add a CSS text-align property to an already present inline style attribute of an element using simple_html_dom parser?

    How can i scroll to specific ID using Header?

    How to select the first element from a selection when one element does not have a class via CSS?

    Rails 4: How to style navigation for current page using jQuery

    How to animate the position change or float: left on window size change?

    How to use pure CSS to show an animation of one element's background and color property?

    How to resize CSS Box with increase in content

    How to disable mask on selected image in the f/ckeditor in webkit, opera browsers?

    How to use `attr` when not on `content` property [duplicate]

    How to select XML element by xlink:href attribute with CSS?

    css - how to determine why a particular css rule is being overwritten

    How to get access to file css in JSF 2.0

    How to stop a CSS rule from applying to a specific element [duplicate]

    How to apply CSS styling to elements created by jquery's append()?

    How to apply asynchronously fetched CSS into view

    How to make this slider control to work in both directions?

    How To Remove Awesomium.net Scroll Bars? & Auto Scroll?

    How can I join background images?

    How to bind click event on image added using CSS 'background-image' property in jQuery