2016-03-29 9 views
3

Ich lese den Code von Font-Awesome, die eine Bibliothek ist, die (von dem, was ich verstehe) Teile von Bootstrap überschreibt, um einen Teil des Codes zu ändern.Welchen Effekt hat f bei der Anwendung auf CSS?

Es gibt eine Klasse fa-twitter, erstellt in Font-Ehrfürchtig genannt:

.fa-twitter:before { 
    content: "\f099"; 
} 

Ich verstehe nicht, was \ f in dieser Situation tut, und wo die Zahlen "099" verwendet werden. Ich habe versucht, Font-Awesome auf Github zu suchen und dachte, dass .fa-twitter an anderer Stelle definiert ist, oder etwas, in dem die Zahlen verwendet werden könnten, aber ich habe noch nichts gefunden.

+0

Das ascii nicht wörtlich Scheck ist @Justinas –

Antwort

8

Es ist nicht \f das zählt. Es ist Unicode-Zeichencode.

\f099 bedeutet It's not literal "f099" but Unicode value of "f099"

Table itself

Beispiel:

#first:after { 
 
    content: "\0178" 
 
} 
 
#second:after { 
 
    content: "0178" 
 
}
With "\": <i id="first"></i> 
 
<br/>Without "\": <i id="second"></i>

+1

beantworten können Sie auch die Unicode-Werte für FA siehe im Einzelnen: https://fortawesome.github.io/Font-Awesome/cheatsheet/ –

+0

Wenn Wenn ich diese Bibliothek auf Codepen benutze und sie ausführe, erhalte ich eine leere Rechteckform, die das Ergebnis der Suche nach dem ASCII-Wert von f099 ist. Warum ist es nicht das Twitter Bird-Symbol? Sollte mein Browser den Wert von f099 übersetzen? –

+0

@AllisonStafford Haben Sie Schriftart Awesome Cass für Code Pen enthalten? Wenn Sie meine verweisende Tabelle überprüfen, werden Sie sehen, dass 'f099' im privaten Bereich ist. Das bedeutet, dass die Standard-Unicode-Tabelle dort keine Werte hat und sie für andere verwendet werden können. – Justinas

1

Es ist nicht 'f', es ist der Inhalt, der wichtig ist:

Wenn Sie Code wie folgt:

<p class="email">[email protected]</p> 

Sie erhalten nur die E-Mail-Adresse: [email protected].

Aber wenn Sie diese in der CSS hinzufügen:

.email:before { 
    content: "Email: " 
} 

Sie Email: [email protected] erhalten werden alle Änderungen an der HTML ohne zu machen.

In diesem Fall wird ein Symbol hinzugefügt, das durch den Code F099 angezeigt wird. Mit anderen Worten, der Twitter-Vogel: enter image description here