Componentes de Bootstrap
Este capítulo explica el uso de Bootstrap Glyphicons (Componentes). Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.
<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 siguiente tabla contiene el uso y los resultados de Bootstrap Glyphicons (Componentes). Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -
| Uso | Resultado |
|---|---|
| <i class = "glyphicon glyphicon-asterisk custom"> </i> | |
| <i class = "glyphicon glyphicon-plus personalizado"> </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-sobre personalizado"> </i> | |
| <i class = "glyphicon glyphicon-pencil personalizado"> </i> | |
| <i class = "glyphicon glyphicon-glass personalizado"> </i> | |
| <i class = "glyphicon glyphicon-music personalizado"> </i> | |
| <i class = "glyphicon glyphicon-search personalizado"> </i> | |
| <i class = "glyphicon glyphicon-heart custom"> </i> | |
| <i class = "glyphicon glyphicon-star personalizado"> </i> | |
| <i class = "glyphicon glyphicon-star-empty custom"> </i> | |
| <i class = "glyphicon glyphicon-user custom"> </i> | |
| <i class = "glyphicon glyphicon-film personalizado"> </i> | |
| <i class = "glyphicon glyphicon-th-large personalizado"> </i> | |
| <i class = "glyphicon glyphicon-th personalizado"> </i> | |
| <i class = "glyphicon glyphicon-th-list personalizado"> </i> | |
| <i class = "glyphicon glyphicon-ok personalizado"> </i> | |
| <i class = "glyphicon glyphicon-remove custom"> </i> | |
| <i class = "glyphicon glyphicon-zoom-in personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-trash custom"> </i> | |
| <i class = "glyphicon glyphicon-home custom"> </i> | |
| <i class = "glyphicon glyphicon-file personalizado"> </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 personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-refresh custom"> </i> | |
| <i class = "glyphicon glyphicon-list-alt personalizado"> </i> | |
| <i class = "glyphicon glyphicon-lock personalizado"> </i> | |
| <i class = "glyphicon glyphicon-flag custom"> </i> | |
| <i class = "glyphicon glyphicon-auriculares personalizados"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-barcode custom"> </i> | |
| <i class = "glyphicon glyphicon-tag personalizado"> </i> | |
| <i class = "glyphicon glyphicon-tags personalizadas"> </i> | |
| <i class = "glyphicon glyphicon-book personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-align-center personalizado"> </i> | |
| <i class = "glyphicon glyphicon-align-right personalizado"> </i> | |
| <i class = "glyphicon glyphicon-align-justify personalizado"> </i> | |
| <i class = "glyphicon glyphicon-list personalizado"> </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 personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-pause personalizado"> </i> | |
| <i class = "glyphicon glyphicon-stop custom"> </i> | |
| <i class = "glyphicon glyphicon-forward personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-remove-sign custom"> </i> | |
| <i class = "glyphicon glyphicon-ok-sign personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-ban-circle personalizado"> </i> | |
| <i class = "glyphicon glyphicon-arrow-left personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-gift custom"> </i> | |
| <i class = "glyphicon glyphicon-leaf custom"> </i> | |
| <i class = "glyphicon glyphicon-fire personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-calendar personalizado"> </i> | |
| <i class = "glyphicon glyphicon-random custom"> </i> | |
| <i class = "glyphicon glyphicon-comment personalizado"> </i> | |
| <i class = "glyphicon glyphicon-magnet personalizado"> </i> | |
| <i class = "glyphicon glyphicon-chevron-up custom"> </i> | |
| <i class = "glyphicon glyphicon-chevron-down custom"> </i> | |
| <i class = "glyphicon glyphicon-retweet personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-bullhorn custom"> </i> | |
| <i class = "glyphicon glyphicon-bell personalizado"> </i> | |
| <i class = "glyphicon glyphicon-certificate personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-circle-arrow-up custom"> </i> | |
| <i class = "glyphicon glyphicon-circle-arrow-down custom"> </i> | |
| <i class = "glyphicon glyphicon-globe personalizado"> </i> | |
| <i class = "glyphicon glyphicon-wrench personalizado"> </i> | |
| <i class = "glyphicon glyphicon-tasks custom"> </i> | |
| <i class = "glyphicon glyphicon-filter personalizado"> </i> | |
| <i class = "glyphicon glyphicon-maletín personalizado"> </i> | |
| <i class = "glyphicon glyphicon-fullscreen custom"> </i> | |
| <i class = "glyphicon glyphicon-dashboard custom"> </i> | |
| <i class = "glyphicon glyphicon-paperclip personalizado"> </i> | |
| <i class = "glyphicon glyphicon-heart-empty custom"> </i> | |
| <i class = "glyphicon glyphicon-link personalizado"> </i> | |
| <i class = "glyphicon glyphicon-phone personalizado"> </i> | |
| <i class = "glyphicon glyphicon-pushpin custom"> </i> | |
| <i class = "glyphicon glyphicon-usd personalizado"> </i> | |
| <i class = "glyphicon glyphicon-gbp personalizado"> </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-attribute custom"> </i> | |
| <i class = "glyphicon glyphicon-sort-by-attribute-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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-save custom"> </i> | |
| <i class = "glyphicon glyphicon-open custom"> </i> | |
| <i class = "glyphicon glyphicon-Saved personalizado"> </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 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-earphone custom"> </i> | |
| <i class = "glyphicon glyphicon-phone personalizado"> </i> | |
| <i class = "glyphicon glyphicon-tower personalizado"> </i> | |
| <i class = "glyphicon glyphicon-stats personalizado"> </i> | |
| <i class = "glyphicon glyphicon-sd-video custom"> </i> | |
| <i class = "glyphicon glyphicon-hd-video custom"> </i> | |
| <i class = "glyphicon glyphicon-subtitles personalizado"> </i> | |
| <i class = "glyphicon glyphicon-sound-stereo custom"> </i> | |
| <i class = "glyphicon glyphicon-sound-dolby custom"> </i> | |
| <i class = "glyphicon glyphicon-sound-5-1 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-sound-6-1 personalizado"> </i> | |
| <i class = "glyphicon glyphicon-sound-7-1 personalizado"> </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> |