---
title: Icone
description: Jamdesk include Font Awesome Pro. Usa le icone in schede, callout, navigazione della barra laterale e testo inline, con più varianti di stile.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

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:

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Learn how to set up your documentation site.
</Card>
```

<Card title="Avvio rapido" icon="rocket" href="/it/quickstart">
  Scopri come configurare il tuo sito di documentazione.
</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:

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

<Icon icon="check" color="green" /> Attività completata

### Props di Icon

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `icon` | string | required | Nome dell'icona Font Awesome |
| `color` | string | - | Colore denominato (red, blue, green) o esadecimale (#FF5733) |
| `size` | number | 16 | Dimensione in pixel |

### Esempi

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

<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](https://fontawesome.com/icons). Cerca ciò che ti serve, quindi usa il nome dell'icona nella documentazione.

<Tip>
Quando cerchi nel sito di Font Awesome, individua il nome dell'icona mostrato sotto l'icona (ad esempio, "circle-check" o "arrow-right"). Usa quel nome esatto nella documentazione.
</Tip>

## Icone dei brand

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

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

<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:

| Categoria | Icone |
|----------|-------|
| Social | github, discord, twitter, linkedin, youtube, slack |
| Linguaggi | python, react, vuejs, angular, node-js, php, java |
| Servizi | aws, docker, google, microsoft, stripe, shopify |

## 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

| Variante | Prefisso | Esempio | Descrizione |
|---------|--------|---------|-------------|
| Piena | `solid/` | `solid/star` | Icone riempite, con il peso maggiore |
| Regolare | `regular/` | `regular/star` | Icone con contorno, di peso medio |
| Leggera | `light/` | `light/star` | Icone con contorno più sottile |
| Sottile | `thin/` | `thin/star` | Icone con contorno più sottile in assoluto |
| Duotone | `duotone/` | `duotone/star` | Icone a due tonalità con colori sovrapposti |

È 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

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

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

```mdx
<Card title="Callouts" icon="light/bell" href="/components/callouts">
  Add important notices to your documentation.
</Card>
```

```yaml page.mdx
---
title: Settings
icon: light/gear
---
```

```json docs.json
{
  "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:

```json docs.json
{
  "group": "Security",
  "icon": { "name": "shield", "style": "duotone" }
}
```

| Campo | Tipo | Descrizione |
|-------|------|-------------|
| `name` | string | Nome dell'icona Font Awesome (obbligatorio) |
| `style` | string | Una delle varianti precedenti: `solid`, `regular`, `light`, `thin`, `duotone` o una variante `sharp-*` |
| `library` | string | `fontawesome` o `lucide`, accettato per compatibilità; le icone vengono visualizzate tramite Font Awesome |

`{ "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:

| Variante | Icona | Ideale per |
|----------|-------|------------|
| Solid | <Icon icon="solid/folder" size={20} /> | Azioni principali, enfasi |
| Regular | <Icon icon="regular/folder" size={20} /> | Elementi secondari dell'interfaccia |
| Light | <Icon icon="light/folder" size={20} /> | Design minimali, navigazione |
| Thin | <Icon icon="thin/folder" size={20} /> | Estetica ultraminimale |
| Duotone | <Icon icon="duotone/folder" size={20} /> | Interesse visivo, branding |

<Note>
Le icone Duotone usano due colori: una tonalità primaria e una secondaria. Il livello secondario viene impostato automaticamente su un'opacità più bassa del colore primario.
</Note>

## 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:

```yaml authentication.mdx
---
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`:

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

### Icone degli ancoraggi

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

```json 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?

<Columns cols={2}>
  <Card title="Ottimizzazione SEO" icon="magnifying-glass-chart" href="/it/content/seo">
    Migliora la visibilità e i metadati
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/it/content/frontmatter">
    Definisci titoli, descrizioni e campi SEO
  </Card>
</Columns>