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:

SymbolHTML-NameDezimalHexadezimal
⇒⇓⇒
Das Symbol in verschiedenen Maskeriungsarten

Fü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.

Diesen Blogartikel teilen:

Verwandte Beiträge:

Divi: Premium-Theme für WordPress
Werbung

Geschrieben von Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.