Verwenden des Symbols "Font Awesome" für Aufzählungspunkte mit einem einzelnen Listenelementelement

131

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.

BaronGrivet
quelle

Antworten:

248

Lösung:

http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

Hier ist ein Blog-Beitrag, der diese Technik ausführlich erklärt.

Inluxc
quelle
18
Eine nützliche Liste von Übersetzungen von diesen fantastischen Symbolen in CSS-Werte finden Sie hier: astronautweb.co/snippet/font-awesome
Scott C Wilson
24
Sie sollten dies einschließen, um die Standard-Aufzählungspunkte zu entfernenul { list-style-type: none; }
Edd
Warum funktioniert diese Methode nicht, wenn ich zwei Listen auf derselben Seite habe?
deKajoo
6
Sehr schön, das einzige, was ich vorschlagen würde, um die Dinge 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.
bremst
Ich habe ein ul-Präfix hinzugefügt, sonst würde es versuchen, es zu tun, wenn der Client die cms verwendet, um eine geordnete (nummerierte) Liste zu erstellen
rtpHarry
153

Die neue Schriftart (Version 4.0.3) macht dies wirklich einfach. Wir verwenden einfach die folgenden Klassen:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons (like these)</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>to replace</li>
  <li><i class="fa-li fa fa-square"></i>default bullets in lists</li>
</ul>

Gemäß dieser (neuen) URL: http://fontawesome.io/examples/#list

lol
quelle
12
Dies sollte mit der neuen fa-Version die richtige Antwort sein. Sehr gut gemacht, danke für diese Erklärung.
David
23
Ich bin anderer Meinung, die Frage nach einer Lösung unter Verwendung einer einzigen Liste in reinem CSS. Dies verwendet zusätzliches HTML sowie Klassen. Dies ist definitiv die Art und Weise, wie die FA-Dokumente dies angeben, aber es ist technisch nicht die Lösung für die Frage und nicht nützlich, wenn Sie dies tun möchten, ohne Ihre HTML-Ausgabe zu ändern.
Ryan
Ich weiß, was Sie wollen - aber Leute, die nicht ständig reines CSS in Situationen schreiben, in denen sie ihren HTML-Code nicht ändern können ???? (Im Ernst, bitte schauen Sie sich an, wie Sie Ihr Webframework ändern können.) Sie benötigen eine Auffrischung des Google-Abfragespeichers, um neben der "tatsächlichen" Antwort nebeneinander auf die "richtige" Schriftart zu verweisen, um zu entscheiden. Ich will nicht sagen "es gibt nicht nur eine richtige Antwort auf das Problem", aber es gibt nicht ...
lol
1
Dieser Ansatz funktioniert nicht gut mit Listenelementen, die in mehrere Zeilen eingeschlossen sind, da die Identifizierung in zusätzlichen Zeilen nicht um die Breite des Symbols erweitert wird.
Lars Haugseth
2
Es lohnt sich wahrscheinlich, mit FA 4.3 (wahrscheinlich auch anderen Versionen) und Bootstrap 3 die Elemente ulund hinzuzufügen, da das Element absolut positioniert ist. Andernfalls schweben sie alle nach links oben. liposition: relativefa-li
Jeremy Harris
14

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

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

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 [&#xf058;]wird\f058

Ryan
quelle
4

Es gibt ein Beispiel für die Verwendung von Font Awesome neben einer ungeordneten Liste auf der Beispielseite .

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

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:

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

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.

Cereallarceny
quelle
2
Sie benötigen kein zusätzliches Markup: Es li:beforekann eine andere Schriftfamilie als die liselbst haben.
Cimmanon
@cimmanon: Während Sie in der Tat korrekt sind, schlägt die Dokumentation für Font Awesome vor, dass Sie das zusätzliche Markup haben sollten. Technisch gesehen ist dies nicht erforderlich. Ich bin jedoch der Meinung, dass möglicherweise einige Glyphen der Schriftart durchsucht werden müssen, um herauszufinden, welcher Schlüssel welchem ​​Symbol zugeordnet ist. Dies würde einige Zeit und Geduld erfordern, aber sicher würde Ihre Lösung auch funktionieren.
Cereallarceny
@cereallarceny - das Problem, das wir haben, ist, dass der HTML-Editor (TinyMCE) für das CMS das Format erzeugt, das ich in meiner Frage angegeben habe. Aus dieser Perspektive haben wir also keine Kontrolle über das Listen-HTML. Es sei denn, wir konfigurieren TinyMCE so, dass es das i-Element enthält (und es nicht als leeres Element löscht).
BaronGrivet
Sie haben also keinen Zugriff auf HTML. Haben Sie Zugriff auf das CSS?
Cereallarceny
Ja, vollständiger Zugriff auf das CSS.
BaronGrivet
1

@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:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Vielen Dank.

Ricardo Zea
quelle
1

Meine Lösung mit Standard <ul>und <i>innen<li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

Geben Sie hier die Bildbeschreibung ein

DEMO HIER

Marco Allori
quelle
1

In Font Awesome 5 kann dies mit reinem CSS erfolgen, wie in einigen der obigen Antworten mit einigen Änderungen.

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

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

Dush
quelle