p:last-child:after {
content: "\2766"; /* Here comes the ivy leaf */
font-size: 150%; /* Makes the leaf larger than the normal text */
padding-left: 10px; /* Leaf won't clash with the last letter of the text */
float: right; /* Horizontal position is set to the right edge of the column */
position: relative; /* This is just an homage to Albert Einstein */
top: 15px /*Vertical distance from the last line of text */
}
Artikel mit Efeublatt beenden
Chris Coyier am
Irgendein Beispiel für dieses CSS?
#wrapper p:last-child:after {
content: “\2766”; /* Hier kommt das Efeu-Blatt */
font-size: 150%; /* Macht das Blatt größer als den normalen Text */
position: relative; /* Dies ist nur eine Hommage an Albert Einstein */
top: 15px; /* Vertikaler Abstand zur letzten Textzeile */
display: block; /* Setzt es in eine neue Zeile */
text-align: center; /* Zentriert es */
}
Das verwende ich, und es sieht großartig aus.
Was bedeutet diese Nummer "2766", wie finde ich die Referenznummer für andere Bilder?
content: “\2766”; /* Hier kommt das Efeu-Blatt */
Was bedeutet diese Nummer "2766", wie finde ich die Referenznummer für andere Bilder?
content: “\2766”; /* Hier kommt das Efeu-Blatt */
Hier finden Sie die Fülle an Unicodes: http://www.decodeunicode.org/en/u+2615.
Wenn Sie das Efeu-Blatt-Symbol ersetzen möchten, ersetzen Sie einfach die Nummer entsprechend, d.h.
statt "2766" setzen Sie "2615" ( Heißgetränk )
Danke
Dies ist ein eindeutiger Code für ein Symbol, ähnlich wie Emojis, es gibt viele Websites, auf denen Sie diese Codes erhalten können.
Wirklich cool. Ich habe zufällig Unicode-Nummern eingegeben, bis ich das Sternchenzeichen (2605) gefunden habe, das ich gesucht habe...
Meine Frage ist, ich kann es mit CSS zum Laufen bringen, aber ich kann es nicht im HTML einer Webseite zum Laufen bringen.
Ich möchte es nicht am Ende jeder Geschichte in einem Div, sondern nur an wenigen ausgewählten Stellen. Ich habe es mit
bhversucht und bekomme stattdessen ein völlig anderes Zeichen als wenn ich CSS verwende. Unterschiede in der Schriftart??Was funktioniert, ist, einen Span .star:after {content:"2605"} zuzuweisen und dann im HTML einen leeren Span-Verweis zu verwenden <span class="star"></span>.
:last-child funktioniert in IE natürlich nicht, aber die Verwendung der Span-Tags schon.
Ups – das seltsame Zeichen hier ist das seltsame Zeichen, auf das ich mich bezog. Ich habe &# vor die Nummer und ; am Ende hinzugefügt, in typischer Unicode-Manier.
Entschuldigung, dass ich jemanden verwirrt habe, aber ich habe herausgefunden, dass & für ASCII und &#x; für Unicode steht.
Dies, das Einfügen von ★, funktionierte, um Unicode direkt in HTML einzufügen.
” position: relative; /* Dies ist nur eine Hommage an Albert Einstein */”
Der herausragendste Teil dieses Codes, liebe ihn, wirklich :)
Für diejenigen, die Unicode-Symbole suchen, Wikipedia hat großartige Tabellen, die nach Kategorien geordnet sind
Ich liebe diesen Tipp, wirklich clever. Mit einigen Modifikationen (p:first-child:before und p:last-child:after) kann ich ihn anstelle eines Bildes für Zitat-Symbole verwenden.
Danke! :-)
Kann mir jemand ein Beispiel geben, wie das HTML aussehen würde?
Sehr oft.
Ja, das funktioniert nicht.
Was IST das? Ich kann kein Beispiel finden. Wenn ich es in mein Stylesheet einfüge, passiert nichts auf meinen Seiten. Könnte bitte jemand das erklären und/oder eine Beispiel-URL geben? Danke.
Ach so, ich habe es herausgefunden. Danke! :)
Du bist kein Webdesigner, oder? Bleib bei Word....
Wow Ang, du bist ein typischer Idiot, den man in der Welt der "Designer" findet. Nichts als A-Löcher. Deshalb schicken die meisten Leute ihre Sachen lieber nach Indien. Man muss sich nicht mit Idioten wie dir herumschlagen.
http://www.isthisthingon.org/unicode/allchars1.php
Das hat so ziemlich jeden Unicode, den man sich vorstellen kann. (Es kann ein bisschen dauern, bis es geladen ist)
Die "Font Awesome"-Icons von Twitter Bootstrap haben eine riesige Anzahl von Icons zusammen mit ihren Unicodes.
Sie müssen die "Font-Awesome"-Schriftart herunterladen, bevor Sie eines der Icons verwenden können.
http://fortawesome.github.io/Font-Awesome/cheatsheet/
Ich war etwas unglücklich, dass kein Beispiel gezeigt wurde.... Also hier ist ein Beispiel
Ivy Jsfiddler Beispiel
Hier gibt es mehr Symbole und Bilder
=> http://www.utf8icons.com/