2013-11-26 10 views
5

In einiger Vorlage sehe ich, dass ein Pfeil, der mit CSS erstellt. so etwas wie dieses:Inhalt Eigenschaft in CSS

div:after{ 
    content:"\f107"; 
} 

dieser Code Anzeige ein Pfeil wie folgt aus:

enter image description here

was ist dieser Code? Wo kann ich mehr Code finden?

Antwort

5

Mit content Eigenschaft bettet einen virtuellen Inhalt innerhalb eines Elements wird mit einem Pseudo :before oder :after verwendet, wenn Sie also :before verwenden, wird der Inhalt vor eingebettet werden.

Von MDN:

content Die CSS-Eigenschaft mit den ::before und ::after pseudo-Elementen verwendet wird, Inhalte in einem Element zu erzeugen. Objekte eingefügt die content Eigenschaft verwenden sind anonymreplaced elements.

Content-Eigenschaft halten kann jede character, number, entities. Weitere Informationen finden Sie in einem Artikel here.

Sie können aber auch eine handliche Konverter here bekommen.


Diese Methode wird auch von font-awesome verwendet - Example und andere verwandte svg Schrift einbetten Bibliotheken, wo man einfach Klassen auf die Elemente aufrufen können und die Schriften werden praktisch eingebettet werden.


Auch nur eine Seite Informationen, Inhalte erzeugen CSS content Eigenschaft verwenden sind inline standardmäßig auch dies gemacht wird inside das Element und nicht außerhalb ..

+1

danke für deine komplette antwort Alien. –

+0

@Mohsen Sie willkommen :) –

0

CSS Inhalt Eigentum: Der Inhalt Eigentum wird mit den Pseudoelementen: before und: after verwendet, um generierten Inhalt einzufügen.

Read more

+0

geht es nicht um Inhalt, dies ist über Content-Zeichen-Codes –

+0

ja, aber Sie haben bereits über Content-Eigenschaft geantwortet. –

1

Wie andere Antworten erklärt haben, verwendet die CSS-Regel die content Eigenschaft ein Zeichen durch seine Unicode-Nummer einzufügen.

jedoch verwendet das Zeichen U + F107 privaten Gebrauch CHARACTER-F107. Dies bedeutet, dass es außer durch private Vereinbarungen keine Bedeutung hat und nicht im öffentlichen Informationsaustausch verwendet werden sollte. Leider verwenden einige "tolle" Tricks Private-Code-Punkte, um grafische Symbole einzufügen. Dies bedeutet, dass, wenn keine sehr spezifische Schriftart verwendet wird, mit einigen Symbolen, die diesen Codepunkten zugewiesen sind, ein generisches Symbol eines unbekannten Zeichens erscheint.

So ist es viel sicherer, statt ein Bild zu verwenden, den Inhalt richtig.

1

CSS hat eine Eigenschaft namens content. Es kann nur mit den Pseudoelementen :after und :before verwendet werden. Es wird wie ein Pseudo-Selektor geschrieben (mit dem Doppelpunkt), aber es wird ein Pseudo-Element genannt, weil es eigentlich nichts auf der Seite auswählt, sondern etwas Neues zu der Seite hinzufügt.

Font Awesome ist eine Webschrift, die alle Symbole aus dem Twitter-Bootstrap-Framework enthält, und jetzt viele mehr.

Sie eine Liste von FontAwesome finden Sie hier: A list of Font Awesome icons and their CSS content values

Sie auch über diesen Link gehen, FontAwesome Examples, wo man verschiedene Symbole und wie die Anwendung unterschiedlicher Größe auf sie sehen können.