HTML / CSS Come aggiungere l'icona dell'immagine a input type = "button"?

Sto usando il CSS di seguito, ma mette un'immagine al centro del pulsante. Qualche modo per allineare un'icona a sinistra oa destra usando <input type="button">, in modo che il testo e l'immagine si adattino e si allineino bene?

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;

Se devi assolutamente usarlo input, prova questo:

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

Di solito è un po 'più facile usare un buttoncon un imginterno:

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

Tuttavia, le implementazioni del browser buttonper l'invio sono incoerenti, così come il fatto che tutti i valori dei pulsanti vengono inviati quando buttonviene utilizzato, il che elimina il rilevamento del "pulsante selezionato" in un modulo di invio multiplo.

Questo dovrebbe fare quello che vuoi, supponendo che l'immagine del tuo pulsante sia di 16 x 16 pixel.

<input type="button" value="Add a new row" class="button-add" />

input.button-add {
    background-image: url(/images/buttons/add.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}

Pulsante di esempio:

Aggiornare

Se ti capita di usare Less, questo mixin potrebbe tornare utile.

.icon-button(@icon-url, @icon-size: 16px, @icon-inset: 10px, @border-color: #000, @background-color: transparent) {
    height: @icon-size * 2;
    padding-left: @icon-size + @icon-inset * 2;
    padding-right: @icon-inset;
    border: 1px solid @border-color;
    background: @background-color url(@icon-url) no-repeat @icon-inset center;
    cursor: pointer;
}

input.button-add {
    .icon-button("http://placehold.it/16x16", @background-color: #ff9900);
}

Quanto sopra viene compilato in

input.button-add {
  height: 32px;
  padding-left: 36px;
  padding-right: 10px;
  border: 1px solid #000000;
  background: #ff9900 url("http://placehold.it/16x16") no-repeat 10px center;
  cursor: pointer;
}

JSFiddle

<button type="submit" style="background-color:transparent; border-color:transparent;"> 
  <img src="images/button/masuk.png" height="35"/>
</button>
<button type="reset" style="background-color:transparent; border-color:transparent;"> 
  <img src="images/button/reset.png" height="35"/>
</button>

Spero che questo ti aiuta.

Se stai usando fogli sprite questo diventa impossibile e l'elemento deve essere avvolto.

.btn{
    display: inline-block;
    background: blue;
    position: relative;
    border-radius: 5px;
}
.input, .btn:after{
    color: #fff;
}
.btn:after{
    position: absolute;
    content: '@';
    right: 0;
    width: 1.3em;
    height: 1em;
}
.input{
    background: transparent;
    color: #fff;
    border: 0;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 5px;
    z-index: 1;
}

Dai un'occhiata a questo violino: http://jsfiddle.net/AJNnZ/

puoi provare questo trucco!

1 °) fai questo:

<label for="img">
   <input type="submit" name="submit" id="img" value="img-btn">
   <img src="yourimage.jpg" id="img">
</label>

2 °) modellalo!

<style type="text/css">
   img:hover {
       cursor: pointer;
   }
   input[type=submit] {
       display: none;
   }
</style>

Non è pulito ma farà il suo lavoro!

Basta aggiungere l'icona nell'elemento pulsante qui è l'esempio

   <button class="social-signup facebook"> 
     <i class="fa fa-facebook-official"></i>  
      Sign up with Facebook</button>

puoi provare a inserire l'immagine all'interno del pulsante http://jsfiddle.net/s5GVh/1415/

<button type="submit"><img src='https://aca5.accela.com/bcc/app_themesDefault/assets/gsearch_disabled.png'/></button>

Quello che vorrei fare è fare questo:

Usa un tipo di pulsante

 <button type="submit" style="background-color:rgba(255,255,255,0.0); border:none;" id="resultButton" onclick="showResults();"><img src="images/search.png" /></button>

Ho usato il colore di sfondo: rgba (255,255,255,0.0); In modo che il colore di sfondo originale di un pulsante scompaia. Lo stesso con il bordo: nessuno; toglierà il bordo originale.

Questo è lo stile minimo necessario, adattando l'immagine alla dimensione predefinita del pulsante:

<input type="button" value=" " style="background-image: url(http://www.geppoz.eu/geppoz.png);background-size:100% 100%;">

il valore "spaziato" è necessario per mantenere l'allineamento della linea di base, nel caso in cui ne abbiate bisogno ...

La risposta di sshow l'ha fatto anche per me:

navigation.css :

[...]

.buttonConfiguration {
    width: 40px;
    background-color: red; /* transparent; */
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: corbel;
    font-size: 12px;
    font-weight: normal;
    margin: 1px 1px;
    cursor: pointer;

    background-image: url('../images/icons5/gear_16.png');
    background-position: center; /* 0px 0px; */
    background-repeat: no-repeat;
    vertical-align: middle;
}

[...]

frameMenu.php :

[... PHP, Javascript and HTML code ...]

<!-- <li><a target="frameBody" href="admin/conf/confFunctions.php"><input type="button" class="buttonSuperAdmin" value="<?= $oLanguage->getExpression('confSettings', 'title', 'C e n t e r s') ?>"></a> -->
<li><a target="frameBody" href="admin/conf/confFunctions.php"><input type="button" class="buttonConfiguration" value=""></a>
<ul>
<li><a target="frameBody" href="admin/conf/getglobals.php "><input type="button" class="buttonSuperAdminSub" value="<?= $oLanguage->getExpression('centerSettings', 'confAdmin1', 'GetGlobals') ?>"></a></li>
<li><a target="frameBody" href="admin/conf/getcwd.php "><input type="button" class="buttonSuperAdminSub" value="<?= $oLanguage->getExpression('confSettings', 'centerAdmin2', 'GetCWD') ?>"></a></li>
</ul>
</li>

[...]

L'ho testato con successo con le ultime versioni di Firefox e Chrome (a partire dal 9 febbraio 2019).

Questo funziona bene per me e sto gestendo anche il passaggio del mouse e il clic CSS (cambiando il colore di sfondo):

HTML (qui vengono mostrate 2 immagini, immagine1 sopra l'immagine2):

<button class="iconButton" style="background-image: url('image1.png'), url('image2.png')"
  onclick="alert('clicked');"></button>

CSS (le mie immagini sono 32px X 32px, quindi ho dato loro 4px per il riempimento e un arrotondamento del bordo di 5px):

.iconButton {
    width: 36px;
    height: 36px;
    background-color: #000000;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}

.iconButton:hover {
    background-color: #303030;
}

.iconButton:active {
    background-color: #606060;
}

button::-moz-focus-inner {
    border: 0;
}

<img src="http://www.pic4ever.com/images/2mpe5id.gif">
            <button class="btn btn-<?php echo $settings["button_background"]; ?>" type="submit"><?php echo $settings["submit_button_text"]; ?></button>