Font-awesome, Eingabetyp 'Submit'

205

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?

denis.peplin
quelle

Antworten:

345

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>
Joao Leme
quelle
Genial! Funktioniert wie erwartet. Es sind noch einige Schritte erforderlich, um dies für simple_form anzupassen oder einen Helfer zu erstellen, aber es ist relativ einfach.
denis.peplin
19
Beachten Sie auch die Unterschiede zwischen <button type=submit>und <input type=submit>: stackoverflow.com/questions/3543615/…
Pavlo
@ Stanislav-Mayorov es funktioniert. Wenn Sie die aktuelle Version 4.7 verwenden, müssen Sie ab 3.2.0 (ab 2012) anpassen. Versuchen Sie die aktualisierte Antwort.
Joao Leme
@JoaoLeme funktioniert <button type="submit">in jeder Form?
Ryuujo
Dies funktioniert nicht, wenn ich das Neuladen der Seite vermeiden möchte.
Salvioner
87

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 &#xf043;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.

Pavlo
quelle
1
Vielen Dank für die Antwort, es funktioniert, aber ich kann diesen Ansatz nicht verwenden, da die Schriftart den gesamten Text des Werts beeinflusst. Ich verwende 'icon-large' auch in anderen Schaltflächen ... Für diejenigen, die dies ausprobieren
möchten
Ich denke, das ist alles, was wir hier tun können. Persönlich empfehle ich Ihnen, <input>ein Symbol zu hinterlassen .
Pavlo
hat gut funktioniert, ich muss <input type = "
submit
Dies ist besser als das Hinzufügen von "fa" zur Elementklasse, da "fa" die Höhe des Elements ändert.
Siwei Shen 申思维
Sie können auch die Inline- font-familyStileigenschaft verwenden, um sie in HTML-Elementen mit Textinhalt zu verwenden.
SaidbakR
54

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/

Bernard Nongpoh
quelle
2
Das machte meinen Tag! Vielen Dank. Für alle anderen Benutzer beachten Sie bitte den Satz: Kopieren Sie die Symbole ( nicht den Unicode ) und fügen Sie sie direkt von dieser Seite in Ihr Design ein, dh kopieren Sie das eigentliche Symbol und es wird funktionieren
PSR
17
<input type="button" class="fa" value="&#xf011; Login"/>ohne Bootstrap benutze die Klasse fa, um es zum
Laufen
2
Wenn Sie versuchen, dies mit Javascript oder jQuery einzustellen, verwenden Sie die Unicode-Variante:$("input.search").addClass("fa").val("\uf011 Login");
Jamie Chong
2
Selbst mit Bootstrap muss ich class = "fa" hinzufügen, damit dies funktioniert.
denis.peplin
12

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;

Mr. Alien
quelle
1
Obwohl es sich um eine sehr coole Lösung handelt, hat sie einen großen Nachteil: Zeigerereignisse : Keine wird vom IE <11 nicht unterstützt ( caniuse.com/#feat=pointer-events ). Der Grund dafür ist, dass die Zeigerereignisseigenschaft für SVG-Elemente (Vektorgrafiken) erstellt wurde und technisch nicht in den W3C-Spezifikationen für andere HTML-Elemente enthalten ist (jedoch wiki.csswg.org/spec/css4-ui#pointer-events ) Alle modernen Browser außer IE <11 unterstützen dies.
CaspianRoach
9

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>
Kirill
quelle
5

Auch so möglich

<button type="submit" class="icon-search icon-large"></button>
Mo.
quelle
1

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

RationalRabbit
quelle