Parece não haver classe para o tipo de entrada 'submit' em font-awesome. É possível usar alguma classe de font-awesome para inserir botões? Adicionei ícones a todos os botões (que na verdade estão vinculados à classe 'btn' do twitter-bootstrap) nos meus aplicativos, mas não consigo adicionar ícones no 'tipo de entrada enviar'.

Ou, como 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 tirei do HTML: como criar um botão de envio com texto + imagem? ) com font-awesome?

use o tipo de botão = "enviar" em vez da entrada

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

para uso do 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 o <input>elemento exibe apenas o atributo value of value, precisamos manipulá-lo apenas:

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

Estou usando a entidade aqui, que corresponde ao U + F043, o símbolo 'tonalidade' do Font Awesome.

CSS

Então temos que estilizá-lo para usar a fonte:

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

O que nos fornecerá o símbolo de tonalidade em Font Awesome e o outro texto na fonte apropriada.

No entanto, esse controle não será perfeito em pixels, portanto, você pode precisar ajustá-lo sozinho.

Você pode usar a fonte awesome utf cheatsheet

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

Aqui está o link para o cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/

Bem, tecnicamente, não é possível obter :beforee :afterpseudo elementos trabalharem em inputelementos

Do W3C :

12.1 Os pseudoelementos: before e: after

Os autores especificam o estilo e a localização do conteúdo gerado com os pseudoelementos: before e: after. Como seus nomes indicam, os pseudoelementos: before e: after especificam o local do conteúdo antes e depois do conteúdo da árvore de documentos de um elemento. A propriedade 'content', em conjunto com esses pseudoelementos, especifica o que é inserido.

Então, eu tinha um projeto onde eu tinha botões de envio na forma de inputtags e, por algum motivo os outros desenvolvedores restringiu-me a usar <button>as tags em vez da entrada de costume enviar botões, então eu vim com uma outra solução, de envolver os botões dentro de um spanconjunto a position: relative;e, em seguida, absolutamente posicionar o ícone usando :afterpseudo.

Nota: O violino de demonstração usa o código de conteúdo do FontAwesome 3.2.1, portanto, pode ser necessário alterar o valor da contentpropriedade de acordo.

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

Agora, aqui tudo é auto-explicativo aqui, sobre uma propriedade pointer-events: none;, ou seja , eu usei isso porque, ao passar o mouse sobre o :afterconteúdo pseudo-gerado, seu botão não clicará, portanto, usar o valor de noneforçará a ação de clique a passar pelo conteúdo .

Da Rede de Desenvolvedores Mozilla :

Além de indicar que o elemento não é o destino dos eventos do mouse, o valor none instrui o evento do mouse a "passar" pelo elemento e segmentar o que estiver "embaixo" desse elemento.

Passe o mouse sobre a fonte / ícone do coração Demoe veja o que acontece se você NÃO usarpointer-events: none;

Você pode usar classes de botão btn-linke btn-xscom o tipo submit, o que tornará um pequeno botão invisível com um ícone dentro dele. Exemplo:

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

Também é possível assim

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

Com vários envios, quando você precisa do valor do envio selecionado, isso pode ser feito facilmente. Basta criar um campo oculto no seu formulário e alterar seu valor, dependendo de qual botão for clicado. Por exemplo, no formulário, diga que você tem:

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

Em seguida, você pode recuperar o valor do botão clicado na variável de postagem "Clicado"