Icone

Jamdesk include Font Awesome Pro: migliaia di icone, gratuite e pro, pronte all'uso.

Utilizzo delle icone nei componenti

La maggior parte dei componenti accetta una prop icon con il nome di un'icona Font Awesome:

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

  Learn how to set up your documentation site.

</Card>

Le icone funzionano in Card, Accordion, Tab e negli elementi di navigazione.

Il componente Icon

Usa il componente <Icon> per visualizzare le icone inline con il testo:

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

Attività completata

Props di Icon

Esempi

<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} />

Trovare le icone

Consulta la libreria completa delle icone su fontawesome.com/icons. Cerca ciò che ti serve, quindi usa il nome dell'icona nella documentazione.

Icone dei brand

I loghi di tecnologie e aziende vengono rilevati automaticamente e visualizzati correttamente:

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

Le icone dei brand più comuni includono:

Varianti delle icone

Le icone Font Awesome sono disponibili in più varianti di stile che ne controllano il peso visivo. Specifica la variante anteponendo un prefisso al nome dell'icona.

Varianti disponibili

È disponibile anche la famiglia Sharp di Font Awesome, con angoli squadrati: sharp-solid/, sharp-regular/, sharp-light/, sharp-thin/ e sharp-duotone-solid/ (ad esempio sharp-duotone-solid/star).

Esempi

<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} />

Utilizzo delle varianti nei componenti

Le varianti funzionano ovunque vengano usate le icone: componenti, navigazione e 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"]
}

Forma a oggetto delle icone

In docs.json, ovunque sia accettata un'icona (gruppi di navigazione, schede, ancoraggi, icone delle pagine e popularPages della ricerca), puoi scrivere l'icona come oggetto invece che come stringa. Questa è la forma prodotta dal selettore di icone del dashboard:

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

{ "name": "shield", "style": "duotone" } equivale alla stringa "duotone/shield". Usa la forma che preferisci. L'icon del frontmatter (icone delle pagine) supporta solo la forma stringa.

Variante predefinita

Quando non viene specificata alcuna variante, le icone vengono visualizzate nella variante Solid. Puoi sostituirla per ogni icona con un prefisso di stile (light/gear) o, in docs.json, con il campo style della forma a oggetto.

Confronto tra le varianti

Ecco la stessa icona in tutte le varianti, per aiutarti a scegliere:

Icone di navigazione

Le icone possono comparire nella navigazione della barra laterale a tre livelli: ancoraggi, gruppi e singole pagine.

Icone delle pagine

Aggiungi un'icona a qualsiasi pagina usando il frontmatter:

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

L'icona compare nella barra laterale accanto al titolo della pagina.

Icone dei gruppi

Aggiungi icone ai gruppi di navigazione in docs.json:

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

Icone degli ancoraggi

Aggiungi icone agli ancoraggi di primo livello in docs.json:

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

Icone gratuite e Pro

Jamdesk include Font Awesome Pro, che offre:

• Oltre 7.000 icone disponibili (rispetto alle circa 2.000 della versione gratuita)
• Tutte le icone gratuite funzionano senza modifiche
• Sono incluse icone esclusive Pro, come le varianti Duotone
• Sono disponibili icone con peso Light e Thin

Se stai effettuando la migrazione da un'altra piattaforma di documentazione che utilizzava Font Awesome Free, tutte le icone esistenti continueranno a funzionare.

Qual è il prossimo passo?