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?

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>

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

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/

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;

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>

Anche possibile come questo

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

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"