Verwenden Sie FontAwesome oder Glyphicons mit css: before

Gibt es eine Möglichkeit, HTML in das CSS- content:Element einzubetten, wenn ein :beforePseudoelement verwendet wird?

Ich möchte eine Font Awesome (oder Glyphicon) in einem Anwendungsfall wie diesem verwenden:

    h1:before {
        content: "X";
        padding-right: 10px;
        padding-left: 10px;
        color: @orangeLight;
    }

Wo Xist so etwas <i class="icon-cut"></i>.

Ich kann dies natürlich manuell in HTML tun, aber ich möchte es :beforein diesem Fall wirklich verwenden .

Gibt es auch eine Möglichkeit, <i>eine Liste als Aufzählungszeichen zu verwenden? Dies funktioniert, verhält sich jedoch bei mehrzeiligen Aufzählungszeichen nicht richtig:

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

Was Sie beschreiben, ist tatsächlich das, was FontAwesome bereits tut. Sie wenden die FontAwesome-Schriftfamilie auf das Pseudoelement ::beforeeines Elements an, dessen Klasse mit "icon-" beginnt.

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

Dann verwenden sie das Pseudoelement, ::beforeum das Symbol im Element mit der Klasse zu platzieren. Ich bin gerade zu http://fortawesome.github.com/Font-Awesome/ gegangen und habe den Code überprüft, um Folgendes zu finden:

.icon-cut:before {
  content: "\f0c4";
}

Wenn Sie also das Symbol erneut hinzufügen möchten, können Sie das ::afterElement verwenden, um dies zu erreichen. Oder für Ihren zweiten Teil Ihrer Frage können Sie das ::afterPseudoelement verwenden, um das Aufzählungszeichen so einzufügen, dass es wie ein Listenelement aussieht. Verwenden Sie dann die absolute Positionierung, um es links oder ähnliches zu platzieren.

i:after{ content: '\2022';}

@ keithwyland Antwort ist großartig. Hier ist ein SCSS-Mixin:

@mixin font-awesome($content){
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    content: $content;
}

Verwendung:

@include font-awesome("\f054");

Bei Ihren Listenelementen gibt es ein wenig CSS, mit dem Sie den gewünschten Effekt erzielen können.

ul.icons li {
  position: relative;
  padding-left: -20px; // for example
}
ul.icons li i {
  position: absolute;
  left: 0;
}

Ich habe dies in Safari unter OS X getestet.

Dieser Ansatz sollte vermieden werden. Der Standardwert für vertical-alignist baseline. Wenn Sie nur die Schriftfamilie des Pseudoelements ändern, werden Elemente mit unterschiedlichen Schriftarten angezeigt. Unterschiedliche Schriftarten können unterschiedliche Schriftmetriken und unterschiedliche Basislinien haben. Damit sich verschiedene Basislinien ausrichten können, müsste sich die Gesamthöhe des Elements erhöhen. Sehen Sie diesen Effekt in Aktion .

Es ist immer besser, ein Element pro Schriftart zu haben.

Die akzeptierte Antwort (Stand: 29. Juli 2019) ist nur dann noch gültig, wenn Sie nicht mit dem neueren SVG-with-JS- Ansatz von FontAwesome begonnen haben. In diesem Fall müssen Sie die Anweisungen auf der Anleitung zu CSS Pseudo-Elements befolgen . Grundsätzlich sind drei Dinge zu beachten:

• Platzieren Sie das Datenattribut auf dem SCRIPT-Tag "data-search-pseudo-elements" und laden Sie die Datei fontawesome.min.js
• Lassen Sie das Pseudoelement selbst anzeigen: keine
• richtige Kombination aus Schriftfamilie und Schriftgröße für das Symbol, das Sie benötigen: "Font Awesome 5 Free" und 300 (fal / light), 400 (far / regulär) oder 900 (fas / solid)

Dies ist der einfachste Weg, um das zu tun, was Sie versuchen:

http://jsfiddle.net/ZEDHT/

<style>
 ul {
   list-style-type: none;
 }
</style>

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

Betreff: Verwenden des Symbols in :before- Die neuesten Font Awesome-Builds enthalten das .fa-icon()Mixin für SASS und LESS. Dies beinhaltet automatisch die font-familysowie einige Rendering-Optimierungen (z -webkit-font-smoothing. B. ). So können Sie zB:

// Add "?" icon to header.
h1:before {
    .fa-icon();
    content: "\f059";
}

<ul class="icons-ul">
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
<li><i class="icon-play-sign"></i> <a>option</a></li>
</ul>

Alle fantastischen Symbole für Schriftarten werden standardmäßig mit Bootstrap geliefert.