Verwenden Sie FontAwesome oder Glyphicons mit css: before

77

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>
tig
quelle
2
Da :beforees sich um ein Pseudoelement handelt, können Sie nicht nur htmlInhalte haben text.
Torsten Walter
Hallo Wig, überprüfe nur, ob meine Antwort ausreichend war. Hoffe es hat geholfen. Vielen Dank!
Keithwyland
Sie sollten wirklich Wylanders Antwort akzeptieren. Es macht genau das, was ich brauche, was auch das zu sein scheint, was Sie wollten!
Matthew Schinckel

Antworten:

157

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
quelle
18
Hier finden Sie alle Inhaltssymbolcodes "\xxxx";: astronautweb.co/snippet/font-awesome
miro marchi
1
@miromarchi Das ist eine schöne Liste an einem Ort! Danke für das Teilen! Wenn Sie auf die Website für großartige Schriftarten gehen, auf der die Symbole aufgelistet sind ( fortawesome.github.io/Font-Awesome/icons ), und auf eines der Symbole klicken, wird auf der Seite oben der Unicode angezeigt , der der gleichen Nummer entspricht in der Eigenschaft content.
Keithwyland
Ist es möglich, Unicode-Werte von Symbolen zu verwenden? \ 2022 ---> Welches Format ist das?
Ratata
2
@ratata Das Format \ 2022 ist meines Erachtens die hexadezimale Darstellung von Unicode. Siehe diese Frage und Antwort für weitere Informationen: stackoverflow.com/questions/10393462/…
keithwyland
Wenn Sie den SVG-with-JS- Ansatz verwenden: Lesen Sie meine Antwort, wie das funktioniert .. oder @ fontawesome.com/how-to-use/on-the-web/advanced/…
flowtron
4

@ 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");
Kumpel
quelle
0

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.

Dunkelblau
quelle
0

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.

Keyamoon
quelle
0

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)
Flowtron
quelle
-1

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>
NateShumate
quelle
-1

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";
}
Charley
quelle
Nur eine kurze Erinnerung daran, dass font awesome auch Variablen enthält, die als Inhalt verwendet werden können, sodass auch Folgendes verwendet werden kann: .pseudo-class: before {@include fa-icon (); Inhalt: $ fa-var-phone-square; }
Jan
-14
<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.

Thanushka
quelle
1
seit wann? Bootstrap kommt mit Glyphicons, nicht mit Fontawesome.
Rafael Herscovici