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

add
app
arrow-down
arrow-left
arrow-left-double
arrow-right
arrow-right-double
arrow-slider-left
arrow-slider-right
arrow-up
attached
audio
back-to-top
cal
check
close
comment
contacts
copy
delete
document
docx
download
edit
email
email-2
error
expand
external-link
faq
favorite
feedback
filter
form
hamburger
info
like
login
logout
move
news
notification
not-favorite
open-data
pause
phone
pdf
pec
photo
pin
play
print
remove
retweet
save
search
settings
show-details
show-password
success
time
upload
user
video
warning
website
xls
zip
zoom-in
zoom-out


Agenzie e società partecipate

adisu
ager
apulia-film-commission
arem
aress
aret
arif
arpa
arti
asset
puglia-salute
teatro-pubb-pugliese


DMS

accessibilita
accesso-agli-atti
accetta
accreditamento-fiere
agenda
agenzie-di-viaggio
aggiungi-impresa-professione
aggiungi-locazione
aggiungi-sr
albo-pretorio
amm-trasparente
annulla-cis
arrivo
atto-di-legge
bacheca
bandi
burp
buyer
cambio-spot
camere-occupate
cerca-persone
cerca-servizio
cinema
cis
cis-sospeso
compatibilita
comune
concorsi
configura-evento
cps
dati-gestore-immobile
educazionale
ente
esonerato
evento
famiglia
gestione-cis
glossario
guida
richiesta-completata
impresa-professione
infopoint
lettura
locazione-turistica
logo-regione
manifestazione-di-interesse
matching
matrimonio
modifica-effettuata
monitora-cps
monitora-spot
museo
noleggio-bici
normativa
normativa-e-doc
note
nuova-apertura
offerte
op-culturali
op-turistici
oss-contratti
organigramma
partenza
percorsi-accessibili
profilazione
programm-di-gov
promuovi-evento
ps
puglia-partecipa
registro-lobbing
registro-richieste
religione
ricevuta-spot
rifiuta
ristorante
seller
servizi-accessibili
servizio
spid
spot
stabilimenti
storico-modifiche
storico-modifiche-gestori
struttura-ricettiva
suggerisci-evento
target
teatro
utenti
workshop


Social

ig
fb
tw
yt
lk
ig-light
fb-light
tw-light
yt-light
lk-light
copy-link
share
share-fb
share-tw
share-lk
share-wapp
share-telegram
share-email
                                            
<!-- 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.