[{"data":1,"prerenderedAt":24},["ShallowReactive",2],{"clay-page:\u002F3.x\u002Fde\u002Ffeatures\u002Fthemes-and-icons":3},{"html":4,"toc":5,"description":20,"hero":21,"list":22,"socialImage":23},"\u003Ch1 id=\"designs--icons\">Designs & Icons\u003C\u002Fh1>\n\u003Ch2 id=\"hell-und-dunkel\">\u003Ca class=\"heading-anchor\" href=\"#hell-und-dunkel\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#hell-und-dunkel\">#\u003C\u002Fa>Hell und dunkel\u003C\u002Fh2>\n\u003Cp>Clay hat ein helles und ein dunkles Design. Es startet mit der Systemeinstellung der Leser und wechselt mit, wenn das System wechselt. Der Sonnen- oder Mond-Button in der Navigationsleiste wechselt von Hand; die Wahl merkt sich der Browser und wendet sie an, bevor die Seite gezeichnet wird. Seiten blitzen also nie im falschen Design auf.\u003C\u002Fp>\n\u003Cp>Codeblöcke werden in zwei Farbschemata hervorgehoben und wechseln zusammen mit der Seite.\u003C\u002Fp>\n\u003Ch2 id=\"icons\">\u003Ca class=\"heading-anchor\" href=\"#icons\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#icons\">#\u003C\u002Fa>Icons\u003C\u002Fh2>\n\u003Cp>Clay nutzt \u003Ca href=\"https:\u002F\u002Ffontawesome.com\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Font Awesome\u003C\u002Fa> für Icons: bei Seiten, Ordnern, der Startseite und Links in der Navigationsleiste. Schreib die Klassen des Icons, wie sie auf seiner Seite bei fontawesome.com stehen:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#CE9178\">fa-solid fa-rocket\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Stil\u003C\u002Fth>\n\u003Cth>Beispiel\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Solid\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>fa-solid fa-rocket\u003C\u002Fcode> \u003Ci class=\"fa-solid fa-rocket\">\u003C\u002Fi>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Regular\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>fa-regular fa-file\u003C\u002Fcode> \u003Ci class=\"fa-regular fa-file\">\u003C\u002Fi>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Brands\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>fa-brands fa-github\u003C\u002Fcode> \u003Ci class=\"fa-brands fa-github\">\u003C\u002Fi>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Cp>Icons funktionieren auch in Markdown, als HTML: \u003Ccode><i class=\"fa-solid fa-star\"><\u002Fi>\u003C\u002Fcode> ergibt \u003Ci class=\"fa-solid fa-star\">\u003C\u002Fi>.\u003C\u002Fp>\n\u003Ch3 id=\"kostenlose-icons\">\u003Ca class=\"heading-anchor\" href=\"#kostenlose-icons\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#kostenlose-icons\">#\u003C\u002Fa>Kostenlose Icons\u003C\u002Fh3>\n\u003Cp>Ohne weitere Einrichtung lädt Clay die kostenlosen Icons von Font Awesome 6. Sie umfassen die Stile Solid, Regular und Brands, genug für die meisten Dokumentationen.\u003C\u002Fp>\n\u003Ch3 id=\"font-awesome-kits\">\u003Ca class=\"heading-anchor\" href=\"#font-awesome-kits\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#font-awesome-kits\">#\u003C\u002Fa>Font-Awesome-Kits\u003C\u002Fh3>\n\u003Cp>Mit einem Font-Awesome-Konto kannst du ein \u003Ca href=\"https:\u002F\u002Fdocs.fontawesome.com\u002Fweb\u002Fsetup\u002Fuse-kit\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Kit\u003C\u002Fa> anlegen: eine Sammlung von Icons, die Pro-Icons, neuere Versionen oder eigene Uploads enthalten kann. Trag die ID des Kits in die \u003Ccode>clay.yaml\u003C\u002Fcode> ein:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#800000;--shiki-dark:#569CD6\">fontawesomeKit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"abc123def4\"\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>Die ID ist der Code in der Einbettungs-URL des Kits, \u003Ccode>https:\u002F\u002Fkit.fontawesome.com\u002Fabc123def4.js\u003C\u002Fcode>. Mit einem Kit lädt Clay das Kit statt der kostenlosen Icons.\u003C\u002Fp>\n\u003Cp>Stelle die Technologie des Kits in seinen Einstellungen auf fontawesome.com auf \u003Cstrong>Web Fonts\u003C\u002Fstrong>. Auf SVG gestellte Kits ersetzen jedes Icon in der Seite durch eine Zeichnung, was sich mit der Art stört, wie Clay Seiten beim Navigieren aktualisiert.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tipp\u003C\u002Fp>\n\u003Cp>Kits hängen an deinem Konto. Halte die ID aus einem öffentlichen Repository heraus, indem du sie in der CI mit \u003Ccode>CLAY_FONTAWESOME_KIT\u003C\u002Fcode> setzt, wie diese Seite es tut; siehe \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fconfiguration\u002Fenvironment-variables\" data-route=\"\u002F3.x\u002Fde\u002Fconfiguration\u002Fenvironment-variables\">Umgebungsvariablen\u003C\u002Fa>. Ein Wert, der keine Kit-ID ist, fällt auf die kostenlosen Icons zurück.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[6,10,13,17],{"id":7,"text":8,"level":9},"hell-und-dunkel","Hell und dunkel",2,{"id":11,"text":12,"level":9},"icons","Icons",{"id":14,"text":15,"level":16},"kostenlose-icons","Kostenlose Icons",3,{"id":18,"text":19,"level":16},"font-awesome-kits","Font-Awesome-Kits","Helles und dunkles Design, und wie du Font-Awesome-Icons und -Kits in Clay nutzt.",null,false,"\u002F_clay\u002Fsocial\u002F3.x\u002Fde\u002Ffeatures\u002Fthemes-and-icons.png",1792666371179]