Componenti Bootstrap
Questo capitolo spiega l'utilizzo di Bootstrap Glyphicons (componenti). Assumilocustom è il nome della classe CSS in cui abbiamo definito la dimensione e il colore, come mostrato nell'esempio riportato di seguito.
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<i.custom {font-size: 2em; color: blue;}>
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous custom"></i>
</body>
</html>La tabella seguente contiene l'utilizzo e i risultati di Bootstrap Glyphicons (componenti). Sostituisci il tag <body> del programma precedente con il codice indicato nella tabella per ottenere i rispettivi output -
| Utilizzo | Risultato |
|---|---|
| <i class = "glyphicon glyphicon-asterisk custom"> </i> | |
| <i class = "glyphicon glyphicon-plus custom"> </i> | |
| <i class = "glyphicon glyphicon-euro custom"> </i> | |
| <i class = "glyphicon glyphicon-minus custom"> </i> | |
| <i class = "glyphicon glyphicon-cloud custom"> </i> | |
| <i class = "glyphicon glyphicon-envelope custom"> </i> | |
| <i class = "glyphicon glyphicon-pencil custom"> </i> | |
| <i class = "glyphicon glyphicon-glass custom"> </i> | |
| <i class = "glyphicon glyphicon-music custom"> </i> | |
| <i class = "glyphicon glyphicon-search custom"> </i> | |
| <i class = "glyphicon glyphicon-heart custom"> </i> | |
| <i class = "glyphicon glyphicon-star custom"> </i> | |
| <i class = "glyphicon glyphicon-star-empty custom"> </i> | |
| <i class = "glyphicon glyphicon-user custom"> </i> | |
| <i class = "glyphicon glyphicon-film custom"> </i> | |
| <i class = "glyphicon glyphicon-th-large custom"> </i> | |
| <i class = "glyphicon glyphicon-th custom"> </i> | |
| <i class = "glyphicon glyphicon-th-list custom"> </i> | |
| <i class = "glyphicon glyphicon-ok custom"> </i> | |
| <i class = "glyphicon glyphicon-remove custom"> </i> | |
| <i class = "glyphicon glyphicon-zoom-in custom"> </i> | |
| <i class = "glyphicon glyphicon-zoom-out custom"> </i> | |
| <i class = "glyphicon glyphicon-off custom"> </i> | |
| <i class = "glyphicon glyphicon-signal custom"> </i> | |
| <i class = "glyphicon glyphicon-cog custom"> </i> | |
| <i class = "glyphicon glyphicon-trash custom"> </i> | |
| <i class = "glyphicon glyphicon-home custom"> </i> | |
| <i class = "glyphicon glyphicon-file custom"> </i> | |
| <i class = "glyphicon glyphicon-time custom"> </i> | |
| <i class = "glyphicon glyphicon-road custom"> </i> | |
| <i class = "glyphicon glyphicon-download-alt custom"> </i> | |
| <i class = "glyphicon glyphicon-download custom"> </i> | |
| <i class = "glyphicon glyphicon-upload custom"> </i> | |
| <i class = "glyphicon glyphicon-inbox custom"> </i> | |
| <i class = "glyphicon glyphicon-play-circle custom"> </i> | |
| <i class = "glyphicon glyphicon-repeat custom"> </i> | |
| <i class = "glyphicon glyphicon-refresh custom"> </i> | |
| <i class = "glyphicon glyphicon-list-alt custom"> </i> | |
| <i class = "glyphicon glyphicon-lock custom"> </i> | |
| <i class = "glyphicon glyphicon-flag custom"> </i> | |
| <i class = "glyphicon glyphicon-headset custom"> </i> | |
| <i class = "glyphicon glyphicon-volume-off custom"> </i> | |
| <i class = "glyphicon glyphicon-volume-down custom"> </i> | |
| <i class = "glyphicon glyphicon-volume-up custom"> </i> | |
| <i class = "glyphicon glyphicon-qrcode custom"> </i> | |
| <i class = "glyphicon glyphicon-barcode custom"> </i> | |
| <i class = "glyphicon glyphicon-tag custom"> </i> | |
| <i class = "glyphicon glyphicon-tags custom"> </i> | |
| <i class = "glyphicon glyphicon-book custom"> </i> | |
| <i class = "glyphicon glyphicon-bookmark custom"> </i> | |
| <i class = "glyphicon glyphicon-print custom"> </i> | |
| <i class = "glyphicon glyphicon-camera custom"> </i> | |
| <i class = "glyphicon glyphicon-font custom"> </i> | |
| <i class = "glyphicon glyphicon-bold custom"> </i> | |
| <i class = "glyphicon glyphicon-italic custom"> </i> | |
| <i class = "glyphicon glyphicon-text-height custom"> </i> | |
| <i class = "glyphicon glyphicon-text-width custom"> </i> | |
| <i class = "glyphicon glyphicon-align-left custom"> </i> | |
| <i class = "glyphicon glyphicon-align-center custom"> </i> | |
| <i class="glyphicon glyphicon-align-right custom"></i> | |
| <i class="glyphicon glyphicon-align-justify custom"></i> | |
| <i class="glyphicon glyphicon-list custom"></i> | |
| <i class="glyphicon glyphicon-indent-left custom"></i> | |
| <i class="glyphicon glyphicon-indent-right custom"></i> | |
| <i class="glyphicon glyphicon-facetime-video custom"></i> | |
| <i class="glyphicon glyphicon-picture custom"></i> | |
| <i class="glyphicon glyphicon-map-marker custom"></i> | |
| <i class="glyphicon glyphicon-adjust custom"></i> | |
| <i class="glyphicon glyphicon-tint custom"></i> | |
| <i class="glyphicon glyphicon-edit custom"></i> | |
| <i class="glyphicon glyphicon-share custom"></i> | |
| <i class="glyphicon glyphicon-check custom"></i> | |
| <i class="glyphicon glyphicon-move custom"></i> | |
| <i class="glyphicon glyphicon-step-backward custom"></i> | |
| <i class="glyphicon glyphicon-fast-backward custom"></i> | |
| <i class="glyphicon glyphicon-backward custom"></i> | |
| <i class="glyphicon glyphicon-play custom"></i> | |
| <i class="glyphicon glyphicon-pause custom"></i> | |
| <i class="glyphicon glyphicon-stop custom"></i> | |
| <i class="glyphicon glyphicon-forward custom"></i> | |
| <i class="glyphicon glyphicon-fast-forward custom"></i> | |
| <i class="glyphicon glyphicon-step-forward custom"></i> | |
| <i class="glyphicon glyphicon-eject custom"></i> | |
| <i class="glyphicon glyphicon-chevron-left custom"></i> | |
| <i class="glyphicon glyphicon-chevron-right custom"></i> | |
| <i class="glyphicon glyphicon-plus-sign custom"></i> | |
| <i class="glyphicon glyphicon-minus-sign custom"></i> | |
| <i class="glyphicon glyphicon-remove-sign custom"></i> | |
| <i class="glyphicon glyphicon-ok-sign custom"></i> | |
| <i class="glyphicon glyphicon-question-sign custom"></i> | |
| <i class="glyphicon glyphicon-info-sign custom"></i> | |
| <i class="glyphicon glyphicon-screenshot custom"></i> | |
| <i class="glyphicon glyphicon-remove-circle custom"></i> | |
| <i class="glyphicon glyphicon-ok-circle custom"></i> | |
| <i class="glyphicon glyphicon-ban-circle custom"></i> | |
| <i class="glyphicon glyphicon-arrow-left custom"></i> | |
| <i class="glyphicon glyphicon-arrow-right custom"></i> | |
| <i class="glyphicon glyphicon-arrow-up custom"></i> | |
| <i class="glyphicon glyphicon-arrow-down custom"></i> | |
| <i class="glyphicon glyphicon-share-alt custom"></i> | |
| <i class="glyphicon glyphicon-resize-full custom"></i> | |
| <i class="glyphicon glyphicon-resize-small custom"></i> | |
| <i class="glyphicon glyphicon-exclamation-sign custom"></i> | |
| <i class="glyphicon glyphicon-gift custom"></i> | |
| <i class="glyphicon glyphicon-leaf custom"></i> | |
| <i class="glyphicon glyphicon-fire custom"></i> | |
| <i class="glyphicon glyphicon-eye-open custom"></i> | |
| <i class="glyphicon glyphicon-eye-close custom"></i> | |
| <i class="glyphicon glyphicon-warning-sign custom"></i> | |
| <i class="glyphicon glyphicon-plane custom"></i> | |
| <i class="glyphicon glyphicon-calendar custom"></i> | |
| <i class="glyphicon glyphicon-random custom"></i> | |
| <i class="glyphicon glyphicon-comment custom"></i> | |
| <i class="glyphicon glyphicon-magnet custom"></i> | |
| <i class="glyphicon glyphicon-chevron-up custom"></i> | |
| <i class="glyphicon glyphicon-chevron-down custom"></i> | |
| <i class="glyphicon glyphicon-retweet custom"></i> | |
| <i class="glyphicon glyphicon-shopping-cart custom"></i> | |
| <i class="glyphicon glyphicon-folder-close custom"></i> | |
| <i class="glyphicon glyphicon-folder-open custom"></i> | |
| <i class="glyphicon glyphicon-resize-vertical custom"></i> | |
| <i class="glyphicon glyphicon-resize-horizontal custom"></i> | |
| <i class="glyphicon glyphicon-hdd custom"></i> | |
| <i class="glyphicon glyphicon-bullhorn custom"></i> | |
| <i class="glyphicon glyphicon-bell custom"></i> | |
| <i class="glyphicon glyphicon-certificate custom"></i> | |
| <i class="glyphicon glyphicon-thumbs-up custom"></i> | |
| <i class="glyphicon glyphicon-thumbs-down custom"></i> | |
| <i class="glyphicon glyphicon-hand-right custom"></i> | |
| <i class="glyphicon glyphicon-hand-left custom"></i> | |
| <i class="glyphicon glyphicon-hand-up custom"></i> | |
| <i class="glyphicon glyphicon-hand-down custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-right custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-left custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-up custom"></i> | |
| <i class="glyphicon glyphicon-circle-arrow-down custom"></i> | |
| <i class="glyphicon glyphicon-globe custom"></i> | |
| <i class="glyphicon glyphicon-wrench custom"></i> | |
| <i class="glyphicon glyphicon-tasks custom"></i> | |
| <i class="glyphicon glyphicon-filter custom"></i> | |
| <i class="glyphicon glyphicon-briefcase custom"></i> | |
| <i class="glyphicon glyphicon-fullscreen custom"></i> | |
| <i class="glyphicon glyphicon-dashboard custom"></i> | |
| <i class="glyphicon glyphicon-paperclip custom"></i> | |
| <i class="glyphicon glyphicon-heart-empty custom"></i> | |
| <i class="glyphicon glyphicon-link custom"></i> | |
| <i class="glyphicon glyphicon-phone custom"></i> | |
| <i class="glyphicon glyphicon-pushpin custom"></i> | |
| <i class="glyphicon glyphicon-usd custom"></i> | |
| <i class="glyphicon glyphicon-gbp custom"></i> | |
| <i class="glyphicon glyphicon-sort custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-alphabet custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-alphabet-alt custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-order custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-order-alt custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-attributes custom"></i> | |
| <i class="glyphicon glyphicon-sort-by-attributes-alt custom"></i> | |
| <i class="glyphicon glyphicon-unchecked custom"></i> | |
| <i class="glyphicon glyphicon-expand custom"></i> | |
| <i class="glyphicon glyphicon-collapse-down custom"></i> | |
| <i class="glyphicon glyphicon-collapse-up custom"></i> | |
| <i class="glyphicon glyphicon-log-in custom"></i> | |
| <i class="glyphicon glyphicon-flash custom"></i> | |
| <i class="glyphicon glyphicon-log-out custom"></i> | |
| <i class="glyphicon glyphicon-new-window custom"></i> | |
| <i class="glyphicon glyphicon-record custom"></i> | |
| <i class="glyphicon glyphicon-save custom"></i> | |
| <i class="glyphicon glyphicon-open custom"></i> | |
| <i class="glyphicon glyphicon-saved custom"></i> | |
| <i class="glyphicon glyphicon-import custom"></i> | |
| <i class="glyphicon glyphicon-export custom"></i> | |
| <i class="glyphicon glyphicon-send custom"></i> | |
| <i class="glyphicon glyphicon-floppy-disk custom"></i> | |
| <i class="glyphicon glyphicon-floppy-saved custom"></i> | |
| <i class="glyphicon glyphicon-floppy-remove custom"></i> | |
| <i class="glyphicon glyphicon-floppy-save custom"></i> | |
| <i class="glyphicon glyphicon-floppy-open custom"></i> | |
| <i class="glyphicon glyphicon-credit-card custom"></i> | |
| <i class="glyphicon glyphicon-transfer custom"></i> | |
| <i class="glyphicon glyphicon-cutlery custom"></i> | |
| <i class="glyphicon glyphicon-header custom"></i> | |
| <i class="glyphicon glyphicon-compressed custom"></i> | |
| <i class="glyphicon glyphicon-earphone custom"></i> | |
| <i class="glyphicon glyphicon-phone custom"></i> | |
| <i class="glyphicon glyphicon-tower custom"></i> | |
| <i class="glyphicon glyphicon-stats custom"></i> | |
| <i class="glyphicon glyphicon-sd-video custom"></i> | |
| <i class="glyphicon glyphicon-hd-video custom"></i> | |
| <i class="glyphicon glyphicon-subtitles custom"></i> | |
| <i class="glyphicon glyphicon-sound-stereo custom"></i> | |
| <i class="glyphicon glyphicon-sound-dolby custom"></i> | |
| <i class="glyphicon glyphicon-sound-5-1 custom"></i> | |
| <i class="glyphicon glyphicon-sound-6-1 custom"></i> | |
| <i class="glyphicon glyphicon-sound-7-1 custom"></i> | |
| <i class="glyphicon glyphicon-copyright-mark custom"></i> | |
| <i class="glyphicon glyphicon-registration-mark custom"></i> | |
| <i class="glyphicon glyphicon-cloud-download custom"></i> | |
| <i class="glyphicon glyphicon-cloud-upload custom"></i> | |
| <i class="glyphicon glyphicon-tree-conifer custom"></i> | |
| <i class="glyphicon glyphicon-tree-deciduous custom"></i> |