Fonte-incrível, tipo de entrada 'enviar'

Question

Parece que não há nenhuma classe para o tipo de entrada 'enviar' no tipo de letra incrível.É possível utilizar algumas classes de tipo de letra incrível para o botão de entrada?Eu adicionei os ícones para todos os botões (que, na verdade, links com classe 'btn' do twitter-bootstrap) em meus aplicativos, mas não pode adicionar ícones no 'input do tipo submit'.

Ou, como utilizar 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 eu tirei de HTML:Como fazer um botão de submit com texto + imagem nele?) com tipo de letra incrível?

Answer 1

use o botão type="submit" em vez de entrada

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

para o tipo de Letra Incrível 3.2.0 uso

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

Answer 2

HTML

Desde <input> elemento apresenta apenas o valor de um atributo de valor, temos de manipular apenas a ele:

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

Eu estou usando  entidade aqui, que corresponde ao U+F043, o tipo de Letra Impressionante do 'tonalidade' símbolo.

CSS

Em seguida, temos o estilo para usar a fonte:

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

O que vai nos dar a tonalidade símbolo de Fonte Incrível e o outro texto no tipo de letra adequado.

No entanto, este controle não será pixel-perfeito, então você pode ter que ajustá-lo por si mesmo.

Answer 3

Você pode usar o tipo de letra incrível utf cheatsheet

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

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

Answer 4

Bem, tecnicamente não é possível obter :before e :after pseudo-elementos de trabalho no input elementos

A partir de W3C:

12.1 O :antes e após o pseudo-elementos

Autores especificar o estilo e a localização do conteúdo gerado com o :antes e após o pseudo-elementos.Como seus nomes indicam, o :antes e após o pseudo-elementos especificar a localização de conteúdo antes e depois de um elemento da árvore do documento de conteúdo.O 'conteúdo' propriedade, em conjunto com estes pseudo-elementos, especifica o que é inserido.

---

Então, eu tinha um projeto onde eu tinha botões submeter, na forma da input marcas e, por alguma razão, os outros desenvolvedores restrita me usar <button> tags em vez do habitual entrada enviar botões, então eu vim com outra solução, de quebra automática de botões dentro de um span conjunto para position: relative; e, em seguida, absolutamente posicionamento do ícone usando :after pseudo.

Nota:A demonstração de mexer usa o código de conteúdo para FontAwesome 3.2.1 assim você pode precisar alterar o valor de content propriedade adequadamente.

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

Demonstração

Agora, aqui tudo é auto-explicativo, aqui, sobre uma propriedade que eu.e pointer-events: none;, Eu já usei isso porque ao passar o mouse sobre o :after pseudo conteúdo gerado, o botão não clique, então, usando o valor de none vai forçar a ação de clique para ir passar por esse conteúdo.

A partir de Mozilla Developer Network :

Além indicando que o elemento não é o alvo do mouse eventos, o valor de nenhum instrui o evento do mouse para ir "através do" elemento de destino e o que está "por trás" desse elemento, em vez disso.

Passe o coração/fonte ícone Demonstração e ver o que acontece se você NÃO usar pointer-events: none;

Answer 5

Você pode usar o botão de classes btn-link e btn-xs com tipo de submit, que vai fazer um pequeno botão invisível com um ícone dentro dela.Exemplo:

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

Answer 6

Também é possível como este

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

Answer 7

Com vários submete, quando você precisa do valor de submeter selecionado, isto pode ser feito muito facilmente.Basta criar um campo oculto no formulário e altere seu valor dependendo de qual botão é clicado.Por exemplo, na forma, digamos 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>

Utilizando # 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 no "Clicar" post variável