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

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.

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.

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

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 []wird\f058

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.

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

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>

DEMO HIER

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