Font-Awesome, Input Type 'Invia'

Question

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?

Answer 1

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>

.

Answer 2

html

Dal momento che <input> Element visualizza solo valore di Attributo Value, dobbiamo manipolare solo:

<input type="submit" class="btn fa-input" value="&#xf043; 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.

Answer 3

Puoi usare il font AwesomeT UTF Cheetsheet

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

.

Ecco il link per il cheatsheet http://fortome.github.io/font-awesome/cheatsheet/

.

Answer 4

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

.

demo

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

Answer 5

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

.

Answer 6

anche possibile come questo

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

.

Answer 7

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"