Icone

Puoi aggiungere icone a qualsiasi testo di una pagina di DevSite utilizzando il carattere dell'icona Material precaricato . Puoi anche utilizzare le icone dei pulsanti quando fai riferimento a un pulsante.

Icone Material

Per aggiungere un'icona Material in linea con il testo in una pagina di DevSite:

  1. Vai alla pagina https://fonts.google.com/icons (non go/icons).
  2. Nella casella Cerca icone Material , cerca l'icona che ti interessa.
  3. Fai clic sull'icona per visualizzare le informazioni sull'utilizzo.
  4. Nella sezione del carattere dell'icona del riquadro delle informazioni sull'utilizzo, copia il nome dell'icona dal secondo blocco di codice.

  5. Copia il seguente testo nel testo per aggiungere l'icona:

    <span class="material-icons">ICON_NAME</span>

  6. Per modificare il colore (o le dimensioni, se necessario) dell'icona, utilizza un attributo style.

Esempio

Il seguente codice genera il testo "Per visualizzare i dettagli di un evento specifico, fai clic sulla freccia di espansione ".

To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.

Puoi utilizzare <i> al posto di <span>. Entrambi i tag funzionano, ma span è più preciso dal punto di vista semantico. Ad esempio, per "Fai clic su Elimina Elimina", puoi utilizzare il seguente codice:

Click <i class="material-icons">delete</i> <b>Delete</b>.

Per ogni elemento con class="material-icons", DevSite aggiunge gli attributi aria-hidden="true" e translate="no". In questo modo, viene garantita un'esperienza utente migliore per gli screen reader rimuovendo gli elementi non necessari dall'albero dell'accessibilità e impedendo la traduzione errata del nome dell'icona.

Icone dei pulsanti

Quando documenti una procedura che utilizza un'icona di pulsante, aggiungi class="inline-icon" al tag <img>. Per ulteriori informazioni, consulta la guida di stile per pulsanti e icone.

Esempio

Il codice seguente produce il testo "Fai clic su Crea progetto".

Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.