Icons

Jamdesk wird mit Font Awesome Pro geliefert: Tausende kostenlose und Pro-Icons stehen zur Verwendung bereit.

Icons in Komponenten verwenden

Die meisten Komponenten akzeptieren eine icon-Prop mit dem Namen eines Font Awesome-Icons:

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

  Learn how to set up your documentation site.

</Card>

Icons funktionieren in Cards, Accordions, Tabs und Navigationselementen.

Die Icon-Komponente

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

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

Aufgabe abgeschlossen

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 gewünschten Icon und verwende anschließend dessen Namen in deiner Dokumentation.

Marken-Icons

Technologie- und Unternehmenslogos werden automatisch erkannt und korrekt dargestellt:

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

Zu den häufig verwendeten Marken-Icons gehören:

Icon-Varianten

Font Awesome-Icons sind in mehreren Stilvarianten verfügbar, die die visuelle Stärke bestimmen. Gib die Variante an, indem du dem Icon-Namen ein Präfix voranstellst.

Verfügbare Varianten

Die Sharp-Familie von Font Awesome ist ebenfalls verfügbar und hat eckige 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

In docs.json kannst du überall dort, wo ein Icon akzeptiert wird (Navigationsgruppen, Tabs, Anker, Seiten-Icons und popularPages für die Suche), das Icon anstelle eines Strings als Objekt angeben. Diese Form erzeugt die Icon-Auswahl des Dashboards:

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

{ "name": "shield", "style": "duotone" } entspricht dem String "duotone/shield". Verwende die Form, die du bevorzugst. Das Frontmatter-icon für Seiten-Icons akzeptiert nur die String-Form.

Standardvariante

Wenn keine Variante angegeben ist, werden Icons in der Variante Solid dargestellt. Überschreibe sie pro Icon mit einem Stilpräfix (light/gear) oder in docs.json über das Feld style der Objektform.

Varianten vergleichen

Hier siehst du dasselbe Icon in allen Varianten, um dir die Auswahl zu erleichtern:

Navigations-Icons

Icons können in der Seitenleisten-Navigation auf drei Ebenen erscheinen: bei Ankern, Gruppen und einzelnen Seiten.

Seiten-Icons

Füge einer beliebigen 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 übergeordneten Ankern 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. Das bedeutet:

• 7.000+ Icons verfügbar (gegenüber etwa 2.000 in der kostenlosen Version)
• Alle kostenlosen Icons funktionieren ohne Änderungen
• Exklusive Pro-Icons wie Duotone-Varianten sind enthalten
• Icons mit leichter und dünner Strichstärke sind verfügbar

Wenn du von einer anderen Dokumentationsplattform migrierst, die Font Awesome Free verwendet hat, funktionieren alle deine vorhandenen Icons weiterhin.

Wie geht es weiter?