Fügen Sie einer Reihe von Schaltflächen ein font-awesome-Symbol hinzu
3 Antworten
Dies ist mit Glyphicon und FontAwesome. Fügen Sie Ihren Unicode (in der CSS-Datei) in den Inhalt ein und erstellen Sie einen Klassennamen, der für Ihre Situation geeignet ist, oder fügen Sie ihn einfach zu .btn oder .btn-default hinzu, aber ändern Sie die CSS, um Folgendes zu berücksichtigen:
FontAwesome: Ссылка *
Glyphicon: Ссылка
HTML
%Vor%CSS
%Vor% Dies erreichen Sie in CSS mit dem :after Pseudoelement :
Entfernen Sie zunächst das i -Element aus Ihrem a -Element und geben Sie dann Ihrem a -Element eine neue Klasse. Ich werde "chevron-right" verwenden:
Navigiere nun zum FontAwesome's Cheatsheet , um die Unicode-ID für das Symbol zu finden, das du verwenden möchtest . Hier finden wir Folgendes:
fa-chevron-right [
]
Dies bedeutet, dass die Unicode-ID unseres Icons (in hexadezimal) f054 ist.
Jetzt können wir zu unserer CSS-Datei gehen und folgendes hinzufügen:
%Vor% Beachten Sie, dass ich die &#x von  durch \ ersetzt und das Semikolon vollständig gelöscht habe.
Hier ist eine JSFiddle-Demo , die sowohl das HTML-Symbol als auch das CSS-Symbol zusammen verwendet.
Die folgenden CSS-Regeln zielen auf die .btn -Elemente ab und injizieren dann ein :after -Pseudo-Element, das das Symbol am Ende der Schaltfläche platziert. Zusätzliches Styling kann erforderlich sein. Andere Optionen sind die Verwendung von JavaScript, um das Element <i> mit benötigten Klassen zu injizieren.
Tags und Links css twitter-bootstrap font-awesome