Schriftart großartig, Eingabetyp „Senden“

Question

In Font-awesome scheint es keine Klasse für den Eingabetyp „submit“ zu geben.Ist es möglich, eine Klasse von „font-awesome“ für die Schaltflächeneingabe 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 aber keine Symbole zu „Eingabetyp senden“ hinzufügen.

Oder wie man diesen Code verwendet:

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 entnommen habe HTML:Wie erstelle ich eine Schaltfläche zum Senden mit Text und Bild darin?) mit Font-Awesome?

Answer 1

Schaltfläche Typ="Senden" anstelle von INPUT

generasacodicetagpre.

für font awesome 3.2.0 Verwendung

generasacodicetagpre.

Answer 2

HTML

Da das <input>-Element nur Wert des Wertattributs anzeigt, müssen wir nur it manipulieren:

generasacodicetagpre.

Ich benutze hier die -Entität, was dem U + F043 entspricht, das "Tönungs-Symbol" des Schriftzugs.

CSS

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

generasacodicetagpre.

Das gibt uns das Tönungssymbol in der Schriftart, und der andere Text in der entsprechenden Schriftart.

Diese Steuerung ist jedoch nicht pixel-perfekt, also müssen Sie es möglicherweise selbst anpassen.

Answer 3

Sie können FONT nutzen Ewesome UTF-CheatSheet

generasacodicetagpre.

Hier ist der Link für das ChezSheet http://ortawesome.github.io/font-awesome/cheatsheet/

Answer 4

Nun ja, technisch gesehen ist das nicht möglich :before Und :after Pseudoelemente wirken weiter input Elemente

Aus W3C:

12.1 Die Pseudoelemente :before und :after

Die Autoren geben den Stil und den Ort generierter Inhalte an: vor und nach Pseudoelementen.Wie ihre Namen hervorgeht, geben Sie vor und nach: nach Pseudoelementen den Ort des Inhalts vor und nach dem Dokumentbauminhalt eines Elements an.Die Eigenschaft "Inhalt" in Verbindung mit diesen Pseudoelementen gibt an, was eingefügt wird.

---

Ich hatte also ein Projekt, bei dem ich Schaltflächen zum Senden in der Form hatte input Tags und aus irgendeinem Grund haben mir die anderen Entwickler die Verwendung eingeschränkt <button> Tags anstelle der üblichen Eingabe-Senden-Schaltflächen, also habe ich mir eine andere Lösung ausgedacht, nämlich die Schaltflächen in ein zu packen span einstellen position: relative; und dann das Symbol absolut positionieren mit :after Pseudo.

Notiz:Die Demo -Feige verwendet den Inhaltscode für FontAwesome 3.2.1, sodass Sie möglicherweise den Wert von ändern müssen content Eigentum entsprechend.

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 nun alles selbsterklärend, was eine Eigenschaft betrifft, d. h pointer-events: none;, ich habe das verwendet, weil ich mit der Maus über das gefahren bin :after Pseudogenerierter Inhalt, Ihre Schaltfläche klickt nicht, also verwenden Sie den Wert von none erzwingt, dass die Klickaktion diesen Inhalt durchläuft.

Aus Mozilla Developer Network :

Zusätzlich zu der Angabe, dass das Element nicht das Ziel von Mausereignissen ist, weist der Wert None das Mausereignis an, "das Element zu gehen und das Ziel, was auch immer" darunter "dieses Elements ist.

Bewegen Sie den Mauszeiger über die Herzschrift/das Herzsymbol Demo und sehen Sie, was passiert, wenn Sie es NICHT verwenden pointer-events: none;

Answer 5

Sie können Schaltflächenklassen verwenden btn-link Und btn-xs mit Typ 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>

Answer 6

auch möglich so möglich

generasacodicetagpre.

Answer 7

Mit mehreren Übermitteilungen, wenn Sie den Wert des ausgewählten Sendens benötigen, kann dies ganz einfach erfolgen.Erstellen Sie einfach ein verborgenes Feld in Ihrem Formular und ändern Sie den Wert, je nachdem, welche Schaltfläche angeklickt wird.Sagen Sie beispielsweise in der Form, Sie haben:

generasacodicetagpre.

mit jquery:

generasacodicetagpre.

Sie können dann den Wert der Taste abrufen, die in der "geklickt" Postvariable angeklickt wird