Html/CSS How to Add Image Icon to Input Type="Button"

HTML / CSS How to add image icon to input type= button ?

If you absolutely must use input, try this:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

It's usually a little easier to use a button with an img inside:

<button type="submit"><img> Text</button>

However the browser implementations of button for submitting are inconsistent, as well as the fact that all button values are sent when button is used - which kills the "what button clicked" detection in a multi-submit form.

Put icon inside input element in a form

The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.

In other words, they have these two CSS rules:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

How to add Font Awesome icon into input button?

<input> is self-closing tag, it's not allowed to have any other elements inside it.

Here are all the 3 possible options of doing it as inline icon.

JsFiddle demo

1. wrap the <i> and <input> button into a <span> tag, with some custom styles.

<span class="btn btn-warning">
    <i class="fa fa-times"></i> <input type="reset" value="Clear"/>
</span>

span > i {
    color: white;
}
span > input {
    background: none;
    color: white;
    padding: 0;
    border: 0;
}

2. use <button type="reset"> - recommended.

<button class="btn btn-warning" type="reset">
    <i class="fa fa-times"></i> Clear
</button>

3. use <a> anchor tag + javascript

<a href="javascript:document.getElementById('myform').reset();" class="btn btn-warning">
    <i class="fa fa-times"></i> Clear
</a>

Embed image in a button element

You could use input type image.

<input type="image" src="http://example.com/path/to/image.png" />

It works as a button and can have the event handlers attached to it.

Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.

<button style="background: url(myimage.png)" ... />

Add an icon image on top of an html input type=button

The easy way is to use an actual button element.

<button type="button"
        id="<?php echo htmlspecialchars($buttonId); ?>"
        onclick="showServer(this.id);">
    <img src="hambuger.png" alt="Sample Image">
    <?php echo htmlspecialchars($serverName); ?>
</button>

How to add background image for input type= button ?

You need to type it without the word image.

background: url('/image/btn.png') no-repeat;

Tested both ways and this one works.

Example:

<html>
    <head>
        <style type="text/css">
            .button{
                background: url(/image/btn.png) no-repeat;
                cursor:pointer;
                border: none;
            }
        </style>
    </head>
    <body>
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
    </body>
</html>

How to change an input button image using CSS

If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.

Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.

Add icon to submit button in twitter bootstrap 2

You can use a button tag instead of input

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

How do I use an image as a submit button?

Use an image type input:

<input type="image" src="/Button1.jpg" border="0" alt="Submit" />

The full HTML:

<form id='formName' name='formName' onsubmit='redirect();return false;'>  <div class="style7">    <input type='text' id='userInput' name='userInput' value=''>    <input type="image" name="submit" src="https://jekyllcodex.org/uploads/grumpycat.jpg" border="0" alt="Submit" style="width: 50px;" />  </div></form>

Html/CSS How to Add Image Icon to Input Type="Button"