Gibt es eine Möglichkeit, HTML in das CSS- content:
Element einzubetten, wenn ein :before
Pseudoelement 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 X
ist so etwas <i class="icon-cut"></i>
.
Ich kann dies natürlich manuell in HTML tun, aber ich möchte es :before
in 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>
:before
es sich um ein Pseudoelement handelt, können Sie nicht nurhtml
Inhalte habentext
.Antworten:
Was Sie beschreiben, ist tatsächlich das, was FontAwesome bereits tut. Sie wenden die FontAwesome-Schriftfamilie auf das Pseudoelement
::before
eines 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,
::before
um 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
::after
Element verwenden, um dies zu erreichen. Oder für Ihren zweiten Teil Ihrer Frage können Sie das::after
Pseudoelement 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';}
quelle
"\xxxx";
: astronautweb.co/snippet/font-awesome@ 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");
quelle
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.
quelle
Dieser Ansatz sollte vermieden werden. Der Standardwert für
vertical-align
istbaseline
. 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.
quelle
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:
quelle
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>
quelle
Betreff: Verwenden des Symbols in
:before
- Die neuesten Font Awesome-Builds enthalten das.fa-icon()
Mixin für SASS und LESS. Dies beinhaltet automatisch diefont-family
sowie einige Rendering-Optimierungen (z-webkit-font-smoothing
. B. ). So können Sie zB:// Add "?" icon to header. h1:before { .fa-icon(); content: "\f059"; }
quelle
<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.
quelle