Icons

Jamdesk wird mit Font Awesome Pro ausgeliefert: Tausende kostenlose und Pro-Icons.

Icons in Komponenten verwenden

Die meisten Komponenten akzeptieren eine icon-Eigenschaft mit einem Font-Awesome-Icon-Namen:

<Card title="Quickstart" icon="rocket" href="/quickstart">

  Learn how to set up your documentation site.

</Card>

Icons funktionieren in Karten, Akkordeons, Tabs und Navigationseinträgen.

Die Icon-Komponente

Verwende die <Icon>-Komponente, um Icons inline mit Text anzuzeigen:

<Icon icon="check" color="green" /> Task completed

Task completed

Icon-Props

Beispiele

<Icon icon="star" color="yellow" size={24} />
<Icon icon="circle-check" color="green" />
<Icon icon="triangle-exclamation" color="orange" />
<Icon icon="heart" color="#E91E63" size={20} />

Icons finden

Durchsuche die vollständige Icon-Bibliothek unter fontawesome.com/icons. Suche nach dem, was du brauchst, und verwende dann den Icon-Namen in deiner Dokumentation.

Marken-Icons

Jamdesk erkennt Technologie- und Firmenlogos automatisch:

<Icon icon="github" size={24} />
<Icon icon="discord" size={24} />
<Icon icon="react" size={24} />
<Icon icon="python" size={24} />

Gängige Marken-Icons umfassen:

Icon-Varianten

Font-Awesome-Icons gibt es in mehreren Stilvarianten, die das visuelle Gewicht steuern. Stelle dem Icon-Namen ein Präfix voran, um eine Variante auszuwählen.

Verfügbare Varianten

Font Awesomes Sharp-Familie ist ebenfalls verfügbar, mit eckigen Ecken: sharp-solid/, sharp-regular/, sharp-light/, sharp-thin/ und sharp-duotone-solid/ (z. B. sharp-duotone-solid/star).

Beispiele

<Icon icon="solid/bell" size={24} />
<Icon icon="regular/bell" size={24} />
<Icon icon="light/bell" size={24} />
<Icon icon="thin/bell" size={24} />
<Icon icon="duotone/bell" size={24} />

Varianten in Komponenten verwenden

Varianten funktionieren überall dort, wo Icons verwendet werden: in Komponenten, der Navigation und im Frontmatter.

<Card title="Callouts" icon="light/bell" href="/components/callouts">

  Add important notices to your documentation.

</Card>

---
title: Settings
icon: light/gear
---

{
  "group": "Account",
  "icon": "regular/user",
  "pages": ["profile", "settings"]
}

Objektform für Icons

Überall dort, wo docs.json ein Icon akzeptiert (Navigationsgruppen, Tabs, Anker, Seiten-Icons und popularPages der Suche), kannst du es statt als Zeichenkette als Objekt schreiben. Die Icon-Auswahl im Dashboard erzeugt diese Form:

{
  "group": "Security",
  "icon": { "name": "shield", "style": "duotone" }
}

{ "name": "shield", "style": "duotone" } entspricht der Zeichenkette "duotone/shield". Verwende, was dir lieber ist. Das Frontmatter-Feld icon (Seiten-Icons) akzeptiert nur die Zeichenkettenform.

Standardvariante

Icons werden standardmäßig in der Solid-Variante gerendert. Überschreibe sie pro Icon mit einem Stil-Präfix (light/gear) oder, in docs.json, mit dem Feld style der Objektform.

Varianten vergleichen

Dasselbe Icon in jeder Variante:

Navigations-Icons

Icons können in der Seitennavigation auf drei Ebenen erscheinen: Anker, Gruppen und einzelne Seiten.

Seiten-Icons

Füge einer Seite über das Frontmatter ein Icon hinzu:

---
title: Authentication
icon: lock
---

Das Icon erscheint in der Seitenleiste neben dem Seitentitel.

Gruppen-Icons

Füge Navigationsgruppen in docs.json Icons hinzu:

{
  "group": "Security",
  "icon": "shield",
  "pages": ["authentication", "api-keys"]
}

Anker-Icons

Füge Anker der obersten Ebene in docs.json Icons hinzu:

{
  "navigation": {
    "anchors": [
      {
        "anchor": "Docs",
        "icon": "book-open",
        "groups": [...]
      },
      {
        "anchor": "API",
        "icon": "code",
        "groups": [...]
      }
    ]
  }
}

Kostenlose und Pro-Icons

Jamdesk enthält Font Awesome Pro, was bedeutet:

• 7.000+ Icons verfügbar (gegenüber ca. 2.000 in der kostenlosen Version)
• Alle kostenlosen Icons funktionieren ohne Änderungen
• Pro-exklusive Icons wie Duotone-Varianten sind enthalten
• Icons in den Gewichten Light und Thin sind verfügbar

Icons aus einer Dokumentationsplattform, die Font Awesome Free nutzte, funktionieren nach der Migration weiterhin.

Wie geht es weiter?