Font-Awesome, Input Type 'Invia'
-
12-12-2019 - |
Domanda
Non sembra esserci alcuna classe per il tipo di input 'Invia' in font-fantastico.È possibile utilizzare qualche classe dal fonte-fantastico per il pulsante input?Ho aggiunto icone a tutti i pulsanti (che in realtà collega con classe 'BTN' da Twitter-bootstrap) nelle mie applicazioni, ma non può aggiungere icone su 'Input Dype Invia'.
o, come usare questo codice:
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>
.
(che ho seguito da HTML: Come effettuare un pulsante di invio con testo + immagine in esso? ) con font-fantastico?
Soluzione
Usa pulsante Tipo="Invia" anziché input
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>
.
Per il font Awesome 3.2.0 Usa
<button type="submit" class="btn btn-success">
<i class="icon-circle-arrow-right icon-large"></i> Next
</button>
. Altri suggerimenti
html
Dal momento che <input>
Element visualizza solo valore di Attributo Value, dobbiamo manipolare solo:
<input type="submit" class="btn fa-input" value=" Input">
.
Sto usando l'entità 
qui, che corrisponde all'U + F043, il simbolo "Tinta" del font.
CSS
Allora dobbiamo lo stile per usare il carattere:
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.
che ci darà il simbolo della tinta in caratteri fantastici e l'altro testo nel carattere appropriato.
Tuttavia, questo controllo non sarà pixel-perfetto, quindi potresti averlo modificato da solo.
Puoi usare il font AwesomeT UTF Cheetsheet
<input type="submit" class="btn btn-success" value=" Login"/>
.
Ecco il link per il cheatsheet http://fortome.github.io/font-awesome/cheatsheet/
. Bene, tecnicamente non è possibile ottenere generacolitagcode e :before
pseudo elementi lavorano su elementi :after
Da W3C :
.12.1 Il: prima e: dopo pseudo-element
Autori specificano lo stile e la posizione del contenuto generato con il : prima e: dopo pseudo-elementi. Come i loro nomi indicano, il : Prima e: dopo pseudo-elementi specificare la posizione del contenuto prima e dopo il contenuto dell'albero del documento di un elemento. Il contenuto' proprietà, in congiunzione con questi pseudo-elementi, specifica cos'è inserito.
.
Così ho avuto un progetto in cui avevo presentato pulsanti sotto forma di tag input
e per qualche motivo gli altri sviluppatori mi hanno limitato di utilizzare tag input
anziché i pulsanti di invio di ingressi usuali, quindi ho trovato un'altra soluzione, di wrapping I pulsanti all'interno di un <button>
impostato su span
e quindi posizionando assolutamente l'icona utilizzando position: relative;
Pseudo.
.Nota: il Fiddle Demo utilizza il codice contenuto per Fontawesome 3.2.1 così Potrebbe essere necessario modificare il valore della proprietà
:after
di conseguenza.
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;
}
.
Ora qui tutto è auto esplicativo qui, su una proprietà cioè content
, l'ho usato perché in movimento sul contenuto generato da pointer-events: none;
Generato, il pulsante non farà clic, quindi utilizzare il valore di :after
forzerà l'azione di clic Per passare attraverso quel contenuto.
Da Mozilla Developer Network :
.Oltre a indicare che l'elemento non è il bersaglio del mouse Eventi, il valore Nessuno incarica l'evento del mouse di andare "attraverso" il elemento e bersaglio tutto ciò che è "sotto" quell'elemento invece.
Assapolazione del carattere del cuore / icona demo e vedere cosa succede se non si utilizza none
È possibile utilizzare classi di pulsanti btn-link
e btn-xs
con tipo submit
, che renderà un piccolo pulsante invisibile con un'icona dentro di esso.Esempio:
<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
<i class="fa fa-times text-danger"></i>
</button>
. anche possibile come questo
<button type="submit" class="icon-search icon-large"></button>
. Con più invio, quando è necessario il valore del invio selezionato, questo può essere fatto abbastanza facilmente.Basta creare un campo nascosto nel modulo e cambia il suo valore a seconda di quale pulsante si fa clic su quale pulsante.Ad esempio, nella forma, dì che hai:
<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>
.
Utilizzo di jQuery:
<script type="text/javascript">
$(document).ready(function()
{
$('.ClickCheck').click(function()
{
var ButtonID = $(this).attr('id');
$('#Clicked').val(ButtonID);
});
});
</script>
.
Quindi è possibile recuperare il valore del pulsante cliccato nella variabile post "cliccata"