Fonte-incrível, tipo de entrada 'enviar'
-
12-12-2019 - |
Pergunta
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?
Solução
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>
Outras dicas
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=" 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.
Você pode usar o tipo de letra incrível utf cheatsheet
<input type="submit" class="btn btn-success" value=" Login"/>
aqui está o link para o texto http://fortawesome.github.io/Font-Awesome/cheatsheet/
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;
}
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;
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>
Também é possível como este
<button type="submit" class="icon-search icon-large"></button>
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