Parece que no hay clase para el tipo de entrada 'submit' en font-awesome. ¿Es posible usar alguna clase de font-awesome para ingresar botones? He agregado íconos a todos los botones (que en realidad se vinculan con la clase 'btn' de twitter-bootstrap) en mis aplicaciones, pero no puedo agregar íconos en 'input type submit'.

O, cómo usar este código:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

html:

<input type="submit" id="image-button">Text</input>

(que tomé de HTML: ¿Cómo hacer un botón de envío con texto + imagen? ) con font-awesome?

use button type = "submit" en lugar de input

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

para el uso de Font Awesome 3.2.0

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

HTML

Como el <input>elemento muestra solo el valor del atributo de valor, solo tenemos que manipularlo:

<input type="submit" class="btn fa-input" value="&#xf043; Input">

Estoy usando  entidad aquí, que corresponde al U + F043, el símbolo 'tinte' de Font Awesome.

CSS

Luego tenemos que darle estilo para usar la fuente:

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Lo que nos dará el símbolo de tinte en Font Awesome y el otro texto en la fuente apropiada.

Sin embargo, este control no será perfecto para píxeles, por lo que puede que tenga que ajustarlo usted mismo.

Puede usar la fuente impresionante cheatheet utf

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

Aquí está el enlace para la hoja de trucos http://fortawesome.github.io/Font-Awesome/cheatsheet/

Bueno, técnicamente no es posible obtener :beforey los :afterpseudo elementos funcionaninput elementos

De W3C :

12.1 Los pseudoelementos antes y después:

Los autores especifican el estilo y la ubicación del contenido generado con los pseudoelementos antes y después. Como indican sus nombres, los pseudoelementos: before y: after especifican la ubicación del contenido antes y después del contenido del árbol de documentos de un elemento. La propiedad 'contenido', junto con estos pseudo-elementos, especifica lo que se inserta.

Así que tuve un proyecto en el que tenía botones de envío en forma de inputetiquetas y, por alguna razón, los otros desarrolladores me restringieron a usar <button>etiquetas en lugar de los botones de envío de entrada habituales, así que se me ocurrió otra solución, envolver los botones dentro de un spanconjunto a position: relative;y luego posicionar absolutamente el icono utilizando :afterseudo.

Nota: El violín de demostración utiliza el código de contenido para FontAwesome 3.2.1, por lo que es posible que deba cambiar el valor de la contentpropiedad en consecuencia.

HTML

<span><input type="submit" value="Send" class="btn btn-default" /></span>

CSS

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

Demo

Ahora aquí todo se explica por sí mismo, sobre una propiedad pointer-events: none;, es decir , la he usado porque al pasar el cursor sobre el :aftercontenido pseudogenerado, su botón no hará clic, por lo que usar el valor denone forzará la acción de clic para pasar a través de ese contenido .

Desde la red de desarrolladores de Mozilla :

Además de indicar que el elemento no es el objetivo de los eventos del mouse, el valor none indica al evento del mouse que "atraviese" el elemento y apunte a lo que esté "debajo" de ese elemento.

Pase el mouse sobre la fuente / ícono del corazón Demoy vea qué sucede si NO usapointer-events: none;

Puede usar clases de botón btn-linky btn-xscon tipo submit, lo que hará un pequeño botón invisible con un icono dentro de él. Ejemplo:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

También posible así

<button type="submit" class="icon-search icon-large"></button>

Con envíos múltiples, cuando necesita el valor del envío seleccionado, esto se puede hacer con bastante facilidad. Simplemente cree un campo oculto en su formulario y cambie su valor según el botón en el que se haga clic. Por ejemplo, en el formulario, digamos que tiene:

<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>

Usando jQuery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

Luego puede recuperar el valor del botón en el que se hizo clic en la variable de publicación "Clicked"