Es scheint keine Klasse für den Eingabetyp 'submit' in font-awesome zu geben. Ist es möglich, eine Klasse von font-awesome für die Tasteneingabe zu verwenden? Ich habe in meinen Anwendungen Symbole zu allen Schaltflächen hinzugefügt (die tatsächlich mit der Klasse 'btn' von Twitter-Bootstrap verknüpft sind), kann jedoch keine Symbole zu 'Eingabetyp senden' hinzufügen.

Oder wie man diesen Code benutzt:

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>

(was ich aus HTML entnommen habe: Wie erstelle ich eine Senden-Schaltfläche mit Text + Bild? ) mit font-awesome?

Verwenden Sie die Schaltfläche type = "submit" anstelle der Eingabe

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

für Font Awesome 3.2.0 verwenden

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

HTML

Da das <input>Element nur den Wert des Wertattributs anzeigt, müssen wir nur diesen bearbeiten:

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

Ich verwende hier eine Entität, die dem U + F043 entspricht, dem Farbtonsymbol von Font Awesome.

CSS

Dann müssen wir es formatieren, um die Schriftart zu verwenden:

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

Dadurch erhalten wir das Farbsymbol in Font Awesome und den anderen Text in der entsprechenden Schriftart.

Dieses Steuerelement ist jedoch nicht pixelgenau, sodass Sie es möglicherweise selbst anpassen müssen.

Sie können font awesome utf Cheatsheet verwenden

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

Hier ist der Link zum Cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/

Nun, technisch gesehen ist es nicht möglich zu erhalten :beforeund :afterPseudoelemente arbeiten auf inputElemente

Von W3C :

12.1 Die: vor und: nach Pseudoelementen

Autoren geben den Stil und die Position des generierten Inhalts mit den Pseudoelementen: before und: after an. Wie ihre Namen anzeigen, geben die Pseudoelemente: before und: after den Speicherort des Inhalts vor und nach dem Dokumentbauminhalt eines Elements an. Die Eigenschaft 'content' gibt in Verbindung mit diesen Pseudoelementen an, was eingefügt wird.

Ich hatte also ein Projekt, in dem ich Schaltflächen zum Senden in Form von inputTags hatte, und aus irgendeinem Grund haben mich die anderen Entwickler darauf beschränkt, <button>Tags anstelle der üblichen Schaltflächen zum Senden von Eingaben zu verwenden. Deshalb habe ich eine andere Lösung gefunden, die Schaltflächen in ein spanSet zu packen zu position: relative;und dann das Symbol mit :afterPseudo absolut positionieren .

Hinweis: Die Demo-Geige verwendet den Inhaltscode für FontAwesome 3.2.1, sodass Sie möglicherweise den Wert der contentEigenschaft entsprechend ändern müssen .

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

Hier ist hier alles selbsterklärend, was eine Eigenschaft betrifft pointer-events: none;, dh ich habe diese verwendet, da :afterIhre Schaltfläche beim Bewegen des Mauszeigers über den pseudogenerierten Inhalt nicht klickt. Wenn Sie also den Wert von verwenden, nonewird die Klickaktion gezwungen, diesen Inhalt zu durchlaufen .

Aus dem Mozilla Developer Network :

Zusätzlich zu dem Hinweis, dass das Element nicht das Ziel von Mausereignissen ist, weist der Wert none das Mausereignis an, das Element "durchzugehen" und stattdessen auf das zu zielen, was sich "unter" diesem Element befindet.

Bewegen Sie den Mauszeiger über die Herzschrift Demound sehen Sie, was passiert, wenn Sie NICHT verwendenpointer-events: none;

Sie können Schaltflächenklassen btn-linkund btn-xsmit Typ verwenden submit, wodurch eine kleine unsichtbare Schaltfläche mit einem Symbol darin erstellt wird. Beispiel:

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

Auch so möglich

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

Bei mehreren Einreichungen ist dies recht einfach, wenn Sie den Wert der ausgewählten Übermittlung benötigen. Erstellen Sie einfach ein verstecktes Feld in Ihrem Formular und ändern Sie dessen Wert je nachdem, auf welche Schaltfläche geklickt wird. Angenommen, Sie haben im Formular Folgendes:

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

Verwenden von jQuery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>

Anschließend können Sie den Wert der Schaltfläche abrufen, auf die in der Beitragsvariablen "Angeklickt" geklickt wurde