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 adjust width of a child element without adjusting the width of the parent in CSS?

    how to resize images inside a div inside another div with css?

    How can i make these tabs Responsive

    How to achieve following graphics via css

    How to place div in top right hand corner of page

    How do I simulate a hover with a touch in touch enabled browsers?

    How is does Jquery display a tooltip on this span element?

    how to put css max-left or min-left position to absolute object?

    I have a CSS file in my App_Themes folder - how can I apply it to my web user control?

    How to place differently sized images in 2 columns with figcaption aligned

    how to put 2 triangle in together css

    How to style the arrow that opens submenus in jQuery mmenu?

    How to draw X Sign with SVG+CSS?

    How to parse CSS font shorthand format

    How to change social network icons colors in fixed menu?

    How to reset css (a:visited{color:green}) when refresh browser address bar

    How to edit the CSS of a selector in Polymer 1.0

    How to add the very last border on the sub menu items

    How do I make an `hr` with repeating small images?

    How to adjust the position of specific elements/items/content on a page with CSS

    How to navigate from one field to another field using Enter Key function in MVC5

    How to increase the duration of :active in css?

    How do I add a CSS class to an element from CSS (not jquery nor javascript)?

    How to execute select() method on polymer elements based on URL?

    How to Prevent My CSS From Clashing With Facebook's CSS?

    How to tell the browser to ignore previous css edits?

    How can I change the color of this text?

    How do I make a table's columns fill the width not occupied by fixed-width columns?

    How to Use jquery Animate() with .slideToggle() Between Two Classes

    How to set the width of my table columns to a fixed value?