Ich habe neulich im Artikel CSS-Tipp: Listenzeichen individuell gestalten gezeigt wie man dort mit ein wenig CSS die Listenzeichen beeinflussen kann. Mithilfe der CSS-Eigenschaft content bist du in der Lage auch Symbole und Emojis als Listenzeichen einzusetzen. Der konkrete Code sah dann so aus:
::marker {color: #07a;}
ul ::marker {font-size: 110%; content: "🛒 ";}
ol ::marker {font: bold 140% 'comic sans ms', cursive;}
.zocken ::marker {content: "🎮 ";}Falls dir die Emojis nicht zusagen, dann kannst du natürlich auch auf diverse UTF-Sonderzeichen und Symbole zurückgreifen. Beliebt sind in solchen Fällen unter anderem die Pfeile in diversen Ausprägungen: →, ⇒, oder ⇉.
Solange du jetzt sicher gehen kannst, dass deine CSS-Datei bzw. deine Website in UTF-8 ausgeliefert wird, dann ist das an sich kein Problem. Probleme fangen dann unter anderem an, wenn die Dateien deines WordPress-Themes mit dem Zeichensatz ISO-8859-1 ausgeliefert werden, was nach meiner Erfahrung regelmäßig vorkommt, sowohl bei den kostenlosen als auch bei den kommerziellen Themes.
Sonderzeichen in HTML maskieren
Bei HTML, und das betrifft auch den Editor in WordPress, ist die Sache einfach. Bist du hier gezwungen ein Sonderzeichen zu maskieren, dann hast du eher die Qual der Wahl. Nehmen wir hier als Beisppiel den doppelten, rechten Pfeil: ⇒. Hier kannst du wählen zwischen folgenden Kombinationen:
| Symbol | HTML-Name | Dezimal | Hexadezimal |
|---|---|---|---|
⇒ | ⇒ | ⇓ | ⇒ |
⇒ in verschiedenen MaskeriungsartenFür welche Geschmacksrichtung du dich entscheidest, bleibt dir überlassen. Die HTML-Namen (engl. Entities) sind leichter zu merken. Die gibt es allerdings nicht für alle Sonderzeichen.
Sonderzeichen in CSS maskieren
Wenn du Sonderzeichen in CSS einbindest und diese maskieren musst, dann hast du es hier etwas weniger komfortabel. Hier kannst du weder auf die HTML-Namen noch auf die dezimalen Angaben zurückgreifen. Es bleibt dir nur die hexadezimale Angabe übrig, aber auch nicht so wie in HTML. Möchtest du jetzt den Pfeil ⇒ bzw. ⇒ einbinden, dann muss dies in folgender Form passieren: \21D2.
::marker {color: #07a;}
ul ::marker {font-size: 110%; content: "\21D2 ";}Die Zeichen &#x werden durch den umgekehrten Schrägstrich bzw. Backslash \ ersetzt und das Semikolon ; am Ende kommt weg. Die UTF-Zeichen werden auch manchmal in folgender Form angegeben: U+21D2. Hier einfach das U+ durch \ ersetzen.
Image(s) licensed by Ingram Image/adpic.
Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
