Icone
Informazioni e suggerimenti per l’utilizzo di icone con Bootstrap Italia.
Le icone di Bootstrap Italia utilizzano una sprite SVG, che contiene al suo interno tutte le icone, referenziate attraverso il tag <use>
attraverso un’àncora.
Per l’utilizzo delle icone è necessario aggiungere la sprite presente nella libreria alla cartella dist/svg
e utilizzarla come descritto di seguito, modificandone il path nell’attributo href
, a seconda di dove viene copiata la sprite SVG nel proprio ambiente.
Compatibilità con browser meno recenti
L’attributo xlink:href
utilizzato nelle precedenti versioni della libreria è stato deprecato dal W3C in favore dell’attributo href
. I browser meno recenti non supportano quest’ultimo, come indicato su caniuse.com . Per garantire la piena compatibilità con questi browser è consigliabile utilizzare entrambi gli attributi.
Il primo esempio in pagina utilizza questo approccio.
Approfondisci l’argomento sul sito del W3C WAI-ARIA Authoring Practices e su MDN .
Esempi
Ogni icona può essere inclusa semplicemente creando un tag <svg>
con riferimento all’àncora desiderata. In questo primo esempio utilizzeremo sia l’attributo href
che xlink:href
per compatibilità con i browser obsoleti:
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-tool" xlink:href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-tool" ></use></svg>
Dimensioni
Sono disponibili le classi icon-*
, dove *
può essere xs
, sm
, lg
, xl
, per ottenere icone di diverse dimensioni.
<svg class= "bg-light icon icon-xs" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "bg-light icon icon-sm" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "bg-light icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "bg-light icon icon-lg" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "bg-light icon icon-xl" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
È anche possibile applicare la classe icon-padded
all’icona per creare un padding proporzionale alla dimensione dell’icona attorno ad essa.
<svg class= "bg-light icon icon-xs icon-padded" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "bg-light icon icon-sm icon-padded" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "bg-light icon icon-padded" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "bg-light icon icon-lg icon-padded" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "bg-light icon icon-xl icon-padded" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
Colori
<svg class= "icon icon-primary bg-light" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "icon icon-secondary bg-light" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "icon icon-success bg-light" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "icon icon-warning bg-light" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "icon icon-danger bg-light" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "icon icon-light bg-dark" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "icon icon-white bg-dark" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
Allineamenti
È possibile usare le classi di allineamento per posizionare le icone all’interno di un elemento.
<div style= "line-height: 4em;" >
<svg class= "bg-light icon align-bottom" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "bg-light icon align-middle" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
<svg class= "bg-light icon align-top" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg>
</div>
Lista delle icone disponibili
it-arrow-down
it-arrow-down-circle
it-arrow-down-triangle
it-arrow-left
it-arrow-left-circle
it-arrow-left-triangle
it-arrow-right
it-arrow-right-circle
it-arrow-right-triangle
it-arrow-up
it-arrow-up-circle
it-arrow-up-triangle
it-ban
it-bookmark
it-box
it-burger
it-calendar
it-camera
it-card
it-chart-line
it-check
it-check-circle
it-chevron-left
it-chevron-right
it-clip
it-clock
it-close
it-close-big
it-close-circle
it-code-circle
it-collapse
it-comment
it-copy
it-delete
it-download
it-error
it-exchange-circle
it-expand
it-external-link
it-file
it-files
it-flag
it-folder
it-fullscreen
it-funnel
it-hearing
it-help
it-help-circle
it-horn
it-inbox
it-info-circle
it-key
it-link
it-list
it-locked
it-mail
it-map-marker
it-map-marker-circle
it-map-marker-minus
it-map-marker-plus
it-maximize
it-maximize-alt
it-minimize
it-minus
it-minus-circle
it-more-actions
it-more-items
it-note
it-open-source
it-pa
it-password-invisible
it-password-visible
it-pencil
it-piattaforme
it-pin
it-plug
it-plus
it-plus-circle
it-presentation
it-print
it-refresh
it-restore
it-rss
it-rss-square
it-search
it-settings
it-share
it-software
it-star-full
it-star-outline
it-telephone
it-tool
it-unlocked
it-upload
it-user
it-video
it-warning
it-warning-circle
it-wifi
it-zoom-in
it-zoom-out
Social
it-behance
it-facebook
it-facebook-square
it-flickr
it-flickr-square
it-github
it-instagram
it-linkedin
it-linkedin-square
it-medium
it-medium-square
it-telegram
it-twitter
it-twitter-square
it-whatsapp
it-whatsapp-square
it-youtube
it-google
Extra
it-designers-italia
it-team-digitale
<div class= "row" >
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-down" ></use></svg> it-arrow-down
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-down-circle" ></use></svg> it-arrow-down-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-down-triangle" ></use></svg> it-arrow-down-triangle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left" ></use></svg> it-arrow-left
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left-circle" ></use></svg> it-arrow-left-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left-triangle" ></use></svg> it-arrow-left-triangle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-right" ></use></svg> it-arrow-right
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-right-circle" ></use></svg> it-arrow-right-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-right-triangle" ></use></svg> it-arrow-right-triangle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-up" ></use></svg> it-arrow-up
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-up-circle" ></use></svg> it-arrow-up-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-up-triangle" ></use></svg> it-arrow-up-triangle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-ban" ></use></svg> it-ban
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-bookmark" ></use></svg> it-bookmark
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-box" ></use></svg> it-box
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-burger" ></use></svg> it-burger
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-calendar" ></use></svg> it-calendar
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-camera" ></use></svg> it-camera
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-card" ></use></svg> it-card
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chart-line" ></use></svg> it-chart-line
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check" ></use></svg> it-check
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle" ></use></svg> it-check-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chevron-left" ></use></svg> it-chevron-left
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chevron-right" ></use></svg> it-chevron-right
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-clip" ></use></svg> it-clip
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-clock" ></use></svg> it-clock
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-close" ></use></svg> it-close
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-close-big" ></use></svg> it-close-big
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-close-circle" ></use></svg> it-close-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-code-circle" ></use></svg> it-code-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-collapse" ></use></svg> it-collapse
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-comment" ></use></svg> it-comment
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-copy" ></use></svg> it-copy
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-delete" ></use></svg> it-delete
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-download" ></use></svg> it-download
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-error" ></use></svg> it-error
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-exchange-circle" ></use></svg> it-exchange-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand" ></use></svg> it-expand
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-external-link" ></use></svg> it-external-link
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-file" ></use></svg> it-file
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-files" ></use></svg> it-files
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-flag" ></use></svg> it-flag
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-folder" ></use></svg> it-folder
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-fullscreen" ></use></svg> it-fullscreen
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-funnel" ></use></svg> it-funnel
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-hearing" ></use></svg> it-hearing
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-help" ></use></svg> it-help
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-help-circle" ></use></svg> it-help-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-horn" ></use></svg> it-horn
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-inbox" ></use></svg> it-inbox
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-info-circle" ></use></svg> it-info-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-key" ></use></svg> it-key
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link" ></use></svg> it-link
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-list" ></use></svg> it-list
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-locked" ></use></svg> it-locked
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-mail" ></use></svg> it-mail
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-map-marker" ></use></svg> it-map-marker
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-map-marker-circle" ></use></svg> it-map-marker-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-map-marker-minus" ></use></svg> it-map-marker-minus
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-map-marker-plus" ></use></svg> it-map-marker-plus
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-maximize" ></use></svg> it-maximize
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-maximize-alt" ></use></svg> it-maximize-alt
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-minimize" ></use></svg> it-minimize
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-minus" ></use></svg> it-minus
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-minus-circle" ></use></svg> it-minus-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-more-actions" ></use></svg> it-more-actions
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-more-items" ></use></svg> it-more-items
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-note" ></use></svg> it-note
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-open-source" ></use></svg> it-open-source
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-pa" ></use></svg> it-pa
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-password-invisible" ></use></svg> it-password-invisible
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-password-visible" ></use></svg> it-password-visible
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-pencil" ></use></svg> it-pencil
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-piattaforme" ></use></svg> it-piattaforme
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-pin" ></use></svg> it-pin
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-plug" ></use></svg> it-plug
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-plus" ></use></svg> it-plus
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-plus-circle" ></use></svg> it-plus-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-presentation" ></use></svg> it-presentation
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-print" ></use></svg> it-print
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-refresh" ></use></svg> it-refresh
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-restore" ></use></svg> it-restore
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-rss" ></use></svg> it-rss
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-rss-square" ></use></svg> it-rss-square
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-search" ></use></svg> it-search
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-settings" ></use></svg> it-settings
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-share" ></use></svg> it-share
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-software" ></use></svg> it-software
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-full" ></use></svg> it-star-full
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-outline" ></use></svg> it-star-outline
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-telephone" ></use></svg> it-telephone
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-tool" ></use></svg> it-tool
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-unlocked" ></use></svg> it-unlocked
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-upload" ></use></svg> it-upload
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-user" ></use></svg> it-user
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-video" ></use></svg> it-video
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-warning" ></use></svg> it-warning
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-warning-circle" ></use></svg> it-warning-circle
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-wifi" ></use></svg> it-wifi
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-zoom-in" ></use></svg> it-zoom-in
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-zoom-out" ></use></svg> it-zoom-out
</div>
</div>
<h4 class= "mt-4" > Social</h4>
<div class= "row" >
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-behance" ></use></svg> it-behance
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-facebook" ></use></svg> it-facebook
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-facebook-square" ></use></svg> it-facebook-square
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-flickr" ></use></svg> it-flickr
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-flickr-square" ></use></svg> it-flickr-square
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-github" ></use></svg> it-github
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-instagram" ></use></svg> it-instagram
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-linkedin" ></use></svg> it-linkedin
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-linkedin-square" ></use></svg> it-linkedin-square
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-medium" ></use></svg> it-medium
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-medium-square" ></use></svg> it-medium-square
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-telegram" ></use></svg> it-telegram
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-twitter" ></use></svg> it-twitter
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-twitter-square" ></use></svg> it-twitter-square
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-whatsapp" ></use></svg> it-whatsapp
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-whatsapp-square" ></use></svg> it-whatsapp-square
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-youtube" ></use></svg> it-youtube
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-google" ></use></svg> it-google
</div>
</div>
<h4 class= "mt-4" > Extra</h4>
<div class= "row" >
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-designers-italia" ></use></svg> it-designers-italia
</div>
<div class= "col-12 col-md-6 col-lg-4" >
<svg class= "icon" ><use href= "/bootstrap-italia/1.x/dist/svg/sprite.svg#it-team-digitale" ></use></svg> it-team-digitale
</div>
</div>