Icone
Le icone servono a veicolare un messaggio senza l'utilizzo di parole. Inoltre, un
corretto utilizzo delle icone è importante per comunicare correttamente un significato e ridurre l'ambiguità. Sono simboli
utilizzati per rappresentare idee, oggetti o azioni.
Qui potrai reperire quelle
a disposizione per l'Ecosistema digitale Turismo Cultura: icone generali, icone del DMS e
icone per i collegamenti social.
Generali
Agenzie e società partecipate
DMS
Social
<!-- share Facebook -->
<i class="dms-wk-icon-share-fb" aria-hidden="true"><span class="path1"></span><span class="path2"></span></i>
<!-- share Twitter -->
<i class="dms-wk-icon-share-tw" aria-hidden="true"><span class="path1"></span><span class="path2"></span></i>
<!-- share Linkedin -->
<i class="dms-wk-icon-share-lk" aria-hidden="true"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
<!-- share Whatsapp -->
<i class="dms-wk-icon-share-wapp" aria-hidden="true"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
<!-- share Telegram -->
<i class="dms-wk-icon-share-telegram" aria-hidden="true"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></i>
<!-- share Email -->
<i class="dms-wk-icon-share-email" aria-hidden="true"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span>
<span class="path5"></span></i>
Utilizzo
Il set di icone è stato implementato grazie a Icomoon, un tool per icone SVG che garantisce la gestione di immagini vettoriali, semplici da utilizzare e con una resa grafica di altissima qualità. E' stato generato un font custom denominato dms-webkit-icons, disponibile nella cartella assets del progetto, in formato svg, ttf e woff, contenente la libreria completa di tutte le icone utilizzate all'interno del portale.
Per ciascuna icona è obbligatorio utilizzare il tag <i> e aggiungere la classe dms-wk-icon- seguita dalla label di una delle icone elencate sopra.
Esempio: <i class="dms-wk-icon-edit"></i>
Tutte le icone, eccetto quelle complesse, sono di colore nero di default e possono essere stilizzate con il colore che si desidera tramite css oppure con le classi utili già implementate e consultabili nella pagina Colori.
Le icone complesse, invece, sono quelle formate da due o più colori e quindi da due o più path, come ad esempio le icone social per lo share, per le quali non è sufficiente aggiungere solo la classe specifica. Pertanto, per il loro utilizzo si consiglia di copiare direttamente lo snippet indicato.