Wir möchten in der Lage sein, ein Font Awesome- Symbol ( http://fortawesome.github.com/Font-Awesome/ ) als Aufzählungspunkt für ungeordnete Listen in einem CMS zu verwenden.
Der Texteditor auf dem CMS gibt nur unformatiertes HTML aus, sodass keine zusätzlichen Elemente / Klassen hinzugefügt werden können.
Dies bedeutet, dass die Symbole angezeigt werden, wenn das Markup folgendermaßen aussieht:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Das erste Problem, das ich sehen kann, wenn Font Awesome ein anderes Attribut der Schriftfamilie erfordert, für das ein separates Element erforderlich wäre.
Ist dies mit reinem CSS möglich? Oder müsste ich das Element mit jQuery an den Anfang jedes Listenelements anhängen?
Mir ist klar, dass wir ein Fallback eines Hintergrundbilds verwenden können, aber es wäre großartig, wenn möglich Font Awesome zu verwenden.
quelle
ul { list-style-type: none; }
margin: 0 0.2em 0 -1.2em;
besser auszurichten, ist, einfach die beiden Werte um den gleichen Betrag zu erhöhen / zu verringern, um den gewünschten Abstand zu erhalten. Wenn Sie einen festen Pixelwert verwenden, der Ihrer Schriftart nicht richtig entspricht, werden Sie bei mehrzeiligen Listenelementen eine Diskrepanz feststellen.Die neue Schriftart (Version 4.0.3) macht dies wirklich einfach. Wir verwenden einfach die folgenden Klassen:
Gemäß dieser (neuen) URL: http://fontawesome.io/examples/#list
quelle
ul
und hinzuzufügen, da das Element absolut positioniert ist. Andernfalls schweben sie alle nach links oben.li
position: relative
fa-li
Ich möchte auf einigen der oben genannten und an anderer Stelle gegebenen Antworten aufbauen und vorschlagen, die absolute Positionierung zusammen mit der : vor der Pseudoklasse zu verwenden . Viele der obigen Beispiele (und ähnliche Fragen) verwenden benutzerdefinierte HTML-Markups, einschließlich der Handhabungsmethode von Font Awesome. Dies widerspricht der ursprünglichen Frage und ist nicht unbedingt erforderlich.
DEMO HIER
Das ist es im Grunde. Sie können den ISO-Wert für die Verwendung in CSS-Inhalten auf dem Font Awesome-Cheatsheet abrufen . Verwenden Sie einfach die letzten 4 alphanumerischen Zeichen, denen ein Backslash vorangestellt ist. So
[]
wird\f058
quelle
Es gibt ein Beispiel für die Verwendung von Font Awesome neben einer ungeordneten Liste auf der Beispielseite .
Wenn Sie nach dem Ausprobieren dieses Codes nicht feststellen können, dass es funktioniert, schließen Sie die Bibliothek nicht richtig ein. Laut ihrer Website sollten Sie die Bibliotheken als solche einschließen:
Schauen Sie sich auch den skurrilen Beitrag von Chris Coyier über Symbolschriftarten auf seiner Website CSS Tricks an .
Hier ist ein Screencast von ihm, in dem er darüber spricht, wie Sie Ihre eigene Symbolschrift erstellen können.
quelle
li:before
kann eine andere Schriftfamilie als dieli
selbst haben.@Tama, vielleicht möchten Sie diese Antwort überprüfen: Verwenden von Font Awesome-Symbolen als Aufzählungszeichen
Grundsätzlich können Sie dies erreichen, indem Sie nur CSS verwenden, ohne dass das zusätzliche Markup erforderlich ist, wie von FontAwesome und den anderen Antworten hier vorgeschlagen.
Mit anderen Worten, Sie können das erreichen, was Sie benötigen, indem Sie dasselbe grundlegende Markup verwenden, das Sie in Ihrem ersten Beitrag erwähnt haben:
Vielen Dank.
quelle
Meine Lösung mit Standard
<ul>
und<i>
innen<li>
DEMO HIER
quelle
In Font Awesome 5 kann dies mit reinem CSS erfolgen, wie in einigen der obigen Antworten mit einigen Änderungen.
Ohne die richtige Schriftgröße wird nur ein leeres Quadrat angezeigt.
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define
quelle