Carattere fantastico, tipo di input 'submit'


205

Sembra che non ci sia alcuna classe per il tipo di input 'submit' in font-awesome. È possibile utilizzare una classe da font-awesome per l'inserimento di pulsanti? Ho aggiunto icone a tutti i pulsanti (che in realtà si collegano con la classe 'btn' da twitter-bootstrap) nelle mie applicazioni, ma non posso aggiungere icone su 'input type submit'.

Oppure, come utilizzare 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 preso da HTML: come creare un pulsante di invio con testo + immagine? ) con font-awesome?

Risposte:


345

use button type = "submit" invece di input

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

per l'uso di Font Awesome 3.2.0

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

Eccezionale! Funziona come previsto. Sono ancora necessari alcuni passaggi per adattarlo a simple_form o creare un aiuto, ma è relativamente semplice.
denis.peplin,

19
Inoltre, fai attenzione alle differenze tra <button type=submit>e <input type=submit>: stackoverflow.com/questions/3543615/…
Pavlo,

@ Stanislav-Mayorov funziona. Se si utilizza l'attuale versione 4.7, è necessario regolare da 3.2.0 (dal 2012). Prova la risposta aggiornata.
Joao Leme,

@JoaoLeme <button type="submit">funziona in qualsiasi forma?
Ryuujo,

Questo non funziona quando voglio evitare di ricaricare la pagina.
Salvioner

87

HTML

Da <input> elemento visualizza solo l'attributo value of value, dobbiamo solo manipolarlo:

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

Sto usando &#xf043;un'entità qui, che corrisponde a U + F043, il simbolo 'tinta' di Font Awesome.

CSS

Quindi dobbiamo modellarlo per usare il carattere:

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

Il che ci darà il simbolo della tinta in Font Awesome e l'altro testo nel carattere appropriato.

Tuttavia, questo controllo non sarà perfetto per i pixel, quindi potresti doverlo modificare da solo.


1
Grazie per la risposta, funziona, ma in realtà non posso usare questo approccio, perché il carattere influisce sul testo dell'intero valore. Sto anche usando 'icona grande' in altri pulsanti ... Per coloro che proveranno questo, i codici dei caratteri sono qui: github.com/FortAwesome/Font-Awesome/blob/master/sass/…
denis.peplin

Penso che sia tutto ciò che possiamo fare qui. Personalmente ti consiglio di lasciare <input>sw / o un'icona.
Pavlo,

ha funzionato bene, devo usare <input type = "submit"> perché ne ho due in un unico modulo
MuniR

è meglio che aggiungere "fa" alla classe element, dato che "fa" cambierà l'altezza dell'elemento.
Siwei Shen 申思维

Inoltre è possibile utilizzare la font-familyproprietà di stile inline per utilizzarlo in tutti gli elementi HTML con contenuto di testo.
SaidbakR,

54

Puoi usare il font cheatsheet fantastico per i font

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

ecco il link per il cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/


2
Mi ha cambiato la giornata in positivo! Grazie .. Per tutti gli altri utenti, si prega di notare la frase: copia e incolla le icone ( non l'unicode ) direttamente da questa pagina nel tuo design, cioè copia l'icona reale e funzionerà
PSR

17
<input type="button" class="fa" value="&#xf011; Login"/>senza bootstrap usa la classe fa per farlo funzionare
StackHola

2
Se stai cercando di impostare questo con javascript o jQuery, usa la variante unicode:$("input.search").addClass("fa").val("\uf011 Login");
Jamie Chong

2
Anche con Bootstrap ho bisogno di aggiungere class = "fa" per farlo funzionare.
denis.peplin

12

Beh, tecnicamente non è possibile ottenere :beforee gli :afterpseudo elementi funzionanoinput elementi

Dal W3C :

12.1 Gli pseudo-elementi: before e: after

Gli autori specificano lo stile e la posizione del contenuto generato con gli pseudo-elementi: before e: after. Come indicano i loro nomi, gli pseudo-elementi: before e: after specificano la posizione del contenuto prima e dopo il contenuto dell'albero del documento di un elemento. La proprietà 'content', insieme a questi pseudo-elementi, specifica cosa viene inserito.


Quindi ho avuto un progetto in cui avevo i pulsanti di invio sotto forma di inputtag e per qualche motivo gli altri sviluppatori mi hanno limitato a usare i <button>tag invece dei soliti pulsanti di invio dell'input, quindi ho trovato un'altra soluzione, di avvolgere i pulsanti all'interno di un spanset per position: relative;poi assolutamente posizionando l'icona usando :afterpseudo.

Nota: il violino demo utilizza il codice contenuto per FontAwesome 3.2.1, pertanto potrebbe essere necessario modificare di conseguenza il valore della contentproprietà.

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 è autoesplicativo qui, su una proprietà pointer-events: none;, cioè , l'ho usato perché passando con il mouse sopra il :aftercontenuto pseudo generato, il tuo pulsante non farà clic, quindi usando il valore di noneforzerai l'azione clic per passare attraverso quel contenuto .

Dalla rete di sviluppatori Mozilla :

Oltre a indicare che l'elemento non è il target degli eventi del mouse, il valore none indica all'evento del mouse di "attraversare" l'elemento e di target qualunque cosa sia "sotto" quell'elemento.

Passa con il mouse sul carattere / icona del cuore Demoe vedi cosa succede se NON lo usipointer-events: none;


1
Mentre una soluzione molto interessante ha un grande svantaggio: pointer-events: none non è supportato da IE <11 ( caniuse.com/#feat=pointer-events ). Il motivo è che la proprietà pointer-events è stata creata per gli elementi SVG (grafica vettoriale) e non è tecnicamente nelle specifiche del W3C per altri elementi HTML (ancora, wiki.csswg.org/spec/css4-ui#pointer-events ) anche se tutti i browser moderni tranne IE <11 lo supportano.
CaspianRoach

9

Puoi usare le classi dei pulsanti btn-linke btn-xscon il tipo submit, che renderà un piccolo pulsante invisibile con un'icona al suo interno. Esempio:

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

5

Anche possibile come questo

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

1

Con più invii, quando è necessario il valore dell'invio selezionato, questo può essere fatto abbastanza facilmente. Basta creare un campo nascosto nel modulo e modificarne il valore in base al pulsante selezionato. Ad esempio, nel modulo, supponiamo di avere:

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

Utilizzando 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 su cui è stato fatto clic nella variabile post "Clic su"

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.