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?
twitter-bootstrap
twitter-bootstrap-rails
font-awesome
denis.peplin
quelle
quelle
<button type=submit>
und<input type=submit>
: stackoverflow.com/questions/3543615/…<button type="submit">
in jeder Form?HTML
Da das
<input>
Element nur den Wert des Wertattributs anzeigt, müssen wir nur diesen bearbeiten: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:
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.
quelle
<input>
ein Symbol zu hinterlassen .font-family
Stileigenschaft verwenden, um sie in HTML-Elementen mit Textinhalt zu verwenden.Sie können font awesome utf Cheatsheet verwenden
Hier ist der Link zum Cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/
quelle
<input type="button" class="fa" value=" Login"/>
ohne Bootstrap benutze die Klasse fa, um es zum$("input.search").addClass("fa").val("\uf011 Login");
Nun, technisch gesehen ist es nicht möglich zu erhalten
:before
und:after
Pseudoelemente arbeiten aufinput
ElementeVon W3C :
Ich hatte also ein Projekt, in dem ich Schaltflächen zum Senden in Form von
input
Tags 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 einspan
Set zu packen zuposition: relative;
und dann das Symbol mit:after
Pseudo absolut positionieren .HTML
CSS
Demo
Hier ist hier alles selbsterklärend, was eine Eigenschaft betrifft
pointer-events: none;
, dh ich habe diese verwendet, da:after
Ihre Schaltfläche beim Bewegen des Mauszeigers über den pseudogenerierten Inhalt nicht klickt. Wenn Sie also den Wert von verwenden,none
wird die Klickaktion gezwungen, diesen Inhalt zu durchlaufen .Aus dem Mozilla Developer Network :
Bewegen Sie den Mauszeiger über die Herzschrift
Demound sehen Sie, was passiert, wenn Sie NICHT verwendenpointer-events: none;
quelle
Sie können Schaltflächenklassen
btn-link
undbtn-xs
mit Typ verwendensubmit
, wodurch eine kleine unsichtbare Schaltfläche mit einem Symbol darin erstellt wird. Beispiel:quelle
Auch so möglich
quelle
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:
Verwenden von jQuery:
Anschließend können Sie den Wert der Schaltfläche abrufen, auf die in der Beitragsvariablen "Angeklickt" geklickt wurde
quelle