# AX - Icona

## Panoramica

**AX - Icona** è un componente di Experience Cloud che mostra icone dalla libreria di icone Salesforce Lightning Design System nelle pagine di Experience Sites.

Usalo per aggiungere indicatori visivi per azioni, stato, categorie o elementi di navigazione in tutto il portale. Configura icona, dimensione, colore e stile in Experience Builder per adattarli al design del tuo portale.

Perfetto per indicatori di stato, pulsanti di azione, intestazioni di sezione, elementi di navigazione o ovunque il tuo portale necessiti di simboli visivi per migliorare la leggibilità e il riconoscimento.

## Impostazioni

{% tabs %}
{% tab title="🎛️ Proprietà" %}

| Nome                         | Descrizione                                                                      | Utilizzo                                                                                                                             |
| ---------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **Nome dell'icona**          | Seleziona il nome dell'icona da visualizzare.                                    | Scegli un'icona che rappresenti chiaramente e completi il contenuto o l'azione a cui è associata.                                    |
| **Dimensione icona**         | Imposta la dimensione dell'icona.                                                | Scegli una dimensione che garantisca che l'icona sia chiaramente visibile e armonicamente integrata nel layout della pagina.         |
| **Variante**                 | Scegli una variante di stile predefinita per l'icona.                            | Seleziona una variante che sia in linea con il significato contestuale o l'azione dell'icona, migliorandone la comunicazione visiva. |
| **Titolo**                   | Definisci un titolo per l'icona.                                                 | Fornisci un titolo che dia agli utenti contesto o informazioni aggiuntive quando passano il cursore sull'icona.                      |
| **Testo alternativo**        | Fornisci testo alternativo per l'icona.                                          | Inserisci un testo descrittivo che trasmetta il significato o l'azione dell'icona, garantendo accessibilità e migliorando la SEO.    |
| **Allineamento orizzontale** | Determina l'allineamento orizzontale dell'icona all'interno del suo contenitore. | Allinea l'icona per garantirne il posizionamento ottimale nel layout dei contenuti, mantenendo equilibrio visivo e flusso.           |
| {% endtab %}                 |                                                                                  |                                                                                                                                      |

{% tab title="🎨 Stile" %}

| **Colore di sfondo**           | Imposta il colore di sfondo per l'icona.                                       | Scegli un colore di sfondo che assicuri che l'icona risalti ed sia visivamente distinta nel design della pagina.                                                  |
| ------------------------------ | ------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Colore primo piano**         | Imposta il colore dell'icona stessa.                                           | Scegli un colore che garantisca che l'icona sia chiaramente visibile rispetto allo sfondo e completi il design complessivo.                                       |
| **Utility colore primo piano** | Applica classi di utilità per modificare il colore del primo piano dell'icona. | Utilizza classi di utilità CSS per applicare facilmente stili di colore predefiniti all'icona, garantendo coerenza e facilità nella personalizzazione del design. |
| **Raggio bordo**               | Definisci il raggio degli angoli del bordo dell'icona.                         | Regola il raggio del bordo per creare icone con angoli arrotondati, migliorando la presentazione stilistica delle icone.                                          |
| {% endtab %}                   |                                                                                |                                                                                                                                                                   |
| {% endtabs %}                  |                                                                                |                                                                                                                                                                   |