Fonte impressionante, tipo de entrada 'submit'


205

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?

Respostas:


345

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>

Impressionante! Funciona como esperado. Ainda precisamos de algumas etapas para adaptar isso para simple_form ou criar um auxiliar, mas é relativamente fácil.
Denis.peplin 28/08/12

19
Também estar ciente das diferenças entre <button type=submit>e <input type=submit>: stackoverflow.com/questions/3543615/...
Pavlo

@ stanislav-mayorov funciona. Se você estiver usando a versão atual 4.7, deverá ajustar a partir da versão 3.2.0 (a partir de 2012). Tente a resposta atualizada.
Joao Leme

@JoaoLeme <button type="submit">funciona de alguma forma?
Ryuujo

Isso não funciona quando quero evitar recarregar a página.
Salvioner 28/03/19

87

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 &#xf043;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.


1
Obrigado pela resposta, funciona, mas na verdade não posso usar essa abordagem, porque a fonte afeta o texto do valor inteiro. Também uso 'icon-large' em outros botões ... Para aqueles que tentarem isso, os códigos de fonte estão aqui: github.com/FortAwesome/Font-Awesome/blob/master/sass/…
denis.peplin

Eu acho que é tudo o que podemos fazer aqui. Pessoalmente, sugiro que você deixe <input>um ícone para ativar / desativar.
Pavlo

funcionou bem, eu tenho que usar <input type = "submit"> porque tenho dois
envios

isso é melhor do que adicionar "fa" à classe 'element', pois "fa" alterará a altura do elemento.
Siwei Shen 申思维

Além disso, você pode usar a font-familypropriedade de estilo embutido para usá-la em qualquer elemento HTML que tenha conteúdo de texto.
precisa saber é o seguinte

54

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/


2
Isto fez o meu dia! Thanks .. Para quaisquer outros usuários, por favor, note a frase: copiar e colar os ícones ( e não o unicode ) diretamente desta página em seu projeto ou seja, copiar o ícone real e vai funcionar
PSR

17
<input type="button" class="fa" value="&#xf011; Login"/>sem inicialização classe de uso fa fazê-lo funcionar
StackHola

2
Se você está tentando definir isso com javascript ou jQuery, use a variação unicode:$("input.search").addClass("fa").val("\uf011 Login");
Jamie Chong

2
Mesmo com o Bootstrap, preciso adicionar class = "fa" para que isso funcione.
Denis.peplin

12

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;


1
Embora seja uma solução muito interessante, ela tem uma grande desvantagem: eventos-ponteiro: nenhum é suportado pelo IE <11 ( caniuse.com/#feat=pointer-events ). O motivo é que a propriedade pointer-events foi criada para elementos SVG (gráficos vetoriais) e não está tecnicamente nas especificações do W3C para outros elementos HTML (ainda, wiki.csswg.org/spec/css4-ui#pointer-events ), embora todos os navegadores modernos, exceto o IE <11, são compatíveis.
CaspianRoach

9

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>

5

Também é possível assim

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

1

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"

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.