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>