Bootstrap Iconos de fuente (Glyphicons)
Este capítulo explicará los iconos de fuente (Glyphicons) y, mediante algunos ejemplos, aprenderá a usarlos. Bootstrap incluye más de 200 glifos en formato de fuente. Primero entendamos qué son los iconos de fuente.
¿Qué son los iconos de fuente?
Los iconos de fuente son fuentes de iconos utilizadas en proyectos web. AunqueGlyphicons Halflingsrequieren una licencia comercial, puede utilizar estos iconos de forma gratuita mediante Bootstrap en sus proyectos.
Como agradecimiento al autor de los iconos, esperamos que incluya un enlace al sitio web GLYPHICONS cuando los use.
Obtener los iconos de fuente
Ya hemosen el capítulo Instalación del entornodescargado la versión Bootstrap 3.x y entendido su estructura de directorios. En lafontscarpeta (fonts) se pueden encontrar los iconos de fuente, que contiene los siguientes archivos:
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
Las reglas CSS relacionadas se escriben en eldistsubdirectorio css dentro de la carpeta de fuentes, en elbootstrap.cssybootstrap-min.cssarchivo correspondiente.
Lista de iconos de fuente
Haga clic aquí para ver la lista de iconos de fuente disponibles.
Explicación de las reglas CSS
Las siguientes reglas CSS constituyen la clase glyphicon.
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
Por lo tanto, la regla @font-face realmente declara font-family y la ubicación donde se encuentran los glyphicons.
.glyphiconLa clase declara una posición relativa con un desplazamiento de 1px desde la parte superior, se muestra como inline-block, declara la fuente, establece font-style y font-weight como normal, y fija la altura de línea (line-height) en 1. Además, se utiliza-webkit-font-smoothing: antialiasedy-moz-osx-font-smoothing: grayscale;para obtener coherencia entre navegadores.
Entonces, el
.glyphicon:empty {
width: 1em;
}
es el glyphicon vacío.
Hay 200 clases, cada una orientada a un icono. El formato común de estas clases es el siguiente:
.glyphicon-keyword:before {
content: "hexvalue";
}
Por ejemplo, el icono de usuario utilizado tiene la siguiente clase:
.glyphicon-user:before {
content: "\e008";
}
Uso
Para usar un icono, simplemente use el siguiente código. Asegúrese de dejar un espacio adecuado entre el icono y el texto.
<span class="glyphicon glyphicon-search"></span>
El siguiente ejemplo demuestra cómo usar los iconos de fuente:
Ejemplo
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> User
</button>
Pruébalo »
El resultado se muestra a continuación:
Barra de navegación con iconos de fuente
Ejemplo
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-home">Home</span></a>
</li>
<li>
<a href="#shop">
<span class="glyphicon glyphicon-shopping-cart">Shop</span></a>
</li>
<li>
<a href="#support">
<span class="glyphicon glyphicon-headphones">Support</span></a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!--jQuery (los complementos de Bootstrap requieren su inclusión)-->
<script src="https://cdn.static.example.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Incluye todos los complementos compilados-->
<script src="https://cdn.static.example.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Pruébalo »
Personalizar iconos de fuente
Ya hemos visto cómo usar iconos de fuente; ahora veamos cómo personalizarlos.
Comenzaremos con el ejemplo anterior y personalizaremos los iconos cambiando el tamaño de la fuente, el color y aplicando sombra de texto.
A continuación se muestra el código inicial:
<button type="button" class="btn btn-primary btn-lg"> <span class="glyphicon glyphicon-user"></span> User </button>
El resultado es el siguiente:
Personalizar el tamaño de los iconos de fuente
Al aumentar o disminuir el tamaño de fuente del icono, puede hacer que el icono se vea más grande o más pequeño.
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px"> <span class="glyphicon glyphicon-user"></span> User </button>
Personalizar el color de los iconos de fuente
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);"> <span class="glyphicon glyphicon-user"></span> User </button>
Aplicar sombra de texto
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-user"></span> User </button>
Personalización en línea de iconos de fuente
Haga clic aquí para personalizar los iconos de fuente »
Lista de iconos
| Icono | Nombre de clase | Ejemplo |
|---|---|---|
| glyphicon glyphicon-asterisk | Pruébalo | |
| glyphicon glyphicon-plus | Pruébalo | |
| glyphicon glyphicon-minus | Pruébalo | |
| glyphicon glyphicon-euro | Pruébalo | |
| glyphicon glyphicon-cloud | Pruébalo | |
| glyphicon glyphicon-envelope | Pruébalo | |
| glyphicon glyphicon-pencil | Pruébalo | |
| glyphicon glyphicon-glass | Pruébalo | |
| glyphicon glyphicon-music | Pruébalo | |
| glyphicon glyphicon-search | Pruébalo | |
| glyphicon glyphicon-heart | Pruébalo | |
| glyphicon glyphicon-star | Pruébalo | |
| glyphicon glyphicon-star-empty | Pruébalo | |
| glyphicon glyphicon-user | Pruébalo | |
| glyphicon glyphicon-film | Pruébalo | |
| glyphicon glyphicon-th-large | Pruébalo | |
| glyphicon glyphicon-th | Pruébalo | |
| glyphicon glyphicon-th-list | Pruébalo | |
| glyphicon glyphicon-ok | Pruébalo | |
| glyphicon glyphicon-remove | Pruébalo | |
| glyphicon glyphicon-zoom-in | Pruébalo | |
| glyphicon glyphicon-zoom-out | Pruébalo | |
| glyphicon glyphicon-off | Pruébalo | |
| glyphicon glyphicon-signal | Pruébalo | |
| glyphicon glyphicon-cog | Pruébalo | |
| glyphicon glyphicon-trash | Pruébalo | |
| glyphicon glyphicon-home | Pruébalo | |
| glyphicon glyphicon-file | Pruébalo | |
| glyphicon glyphicon-time | Pruébalo | |
| glyphicon glyphicon-road | Pruébalo | |
| glyphicon glyphicon-download-alt | Pruébalo | |
| glyphicon glyphicon-download | Pruébalo | |
| glyphicon glyphicon-upload | Pruébalo | |
| glyphicon glyphicon-inbox | Pruébalo | |
| glyphicon glyphicon-play-circle | Pruébalo | |
| glyphicon glyphicon-repeat | Pruébalo | |
| glyphicon glyphicon-refresh | Pruébalo | |
| glyphicon glyphicon-list-alt | Pruébalo | |
| glyphicon glyphicon-lock | Pruébalo | |
| glyphicon glyphicon-flag | Pruébalo | |
| glyphicon glyphicon-headphones | Pruébalo | |
| glyphicon glyphicon-volume-off | Pruébalo | |
| glyphicon glyphicon-volume-down | Pruébalo | |
| glyphicon glyphicon-volume-up | Pruébalo | |
| glyphicon glyphicon-qrcode | Pruébalo | |
| glyphicon glyphicon-barcode | Pruébalo | |
| glyphicon glyphicon-tag | Pruébalo | |
| glyphicon glyphicon-tags | Pruébalo | |
| glyphicon glyphicon-book | Pruébalo | |
| glyphicon glyphicon-bookmark | Pruébalo | |
| glyphicon glyphicon-print | Pruébalo | |
| glyphicon glyphicon-camera | Pruébalo | |
| glyphicon glyphicon-font | Pruébalo | |
| glyphicon glyphicon-bold | Pruébalo | |
| glyphicon glyphicon-italic | Pruébalo | |
| glyphicon glyphicon-text-height | Pruébalo | |
| glyphicon glyphicon-text-width | Pruébalo | |
| glyphicon glyphicon-align-left | Pruébalo | |
| glyphicon glyphicon-align-center | Pruébalo | |
| glyphicon glyphicon-align-right | Pruébalo | |
| glyphicon glyphicon-align-justify | Pruébalo | |
| glyphicon glyphicon-list | Pruébalo | |
| glyphicon glyphicon-indent-left | Pruébalo | |
| glyphicon glyphicon-indent-right | Pruébalo | |
| glyphicon glyphicon-facetime-video | Pruébalo | |
| glyphicon glyphicon-picture | Pruébalo | |
| glyphicon glyphicon-map-marker | Pruébalo | |
| glyphicon glyphicon-adjust | Pruébalo | |
| glyphicon glyphicon-tint | Pruébalo | |
| glyphicon glyphicon-edit | Pruébalo | |
| glyphicon glyphicon-share | Pruébalo | |
| glyphicon glyphicon-check | Pruébalo | |
| glyphicon glyphicon-move | Pruébalo | |
| glyphicon glyphicon-step-backward | Pruébalo | |
| glyphicon glyphicon-fast-backward | Pruébalo | |
| glyphicon glyphicon-backward | Pruébalo | |
| glyphicon glyphicon-play | Pruébalo | |
| glyphicon glyphicon-pause | Pruébalo | |
| glyphicon glyphicon-stop | Pruébalo | |
| glyphicon glyphicon-forward | Pruébalo | |
| glyphicon glyphicon-fast-forward | Pruébalo | |
| glyphicon glyphicon-step-forward | Pruébalo | |
| glyphicon glyphicon-eject | Pruébalo | |
| glyphicon glyphicon-chevron-left | Pruébalo | |
| glyphicon glyphicon-chevron-right | Pruébalo | |
| glyphicon glyphicon-plus-sign | Pruébalo | |
| glyphicon glyphicon-minus-sign | Pruébalo | |
| glyphicon glyphicon-remove-sign | Pruébalo | |
| glyphicon glyphicon-ok-sign | Pruébalo | |
| glyphicon glyphicon-question-sign | Pruébalo | |
| glyphicon glyphicon-info-sign | Pruébalo | |
| glyphicon glyphicon-screenshot | Pruébalo | |
| glyphicon glyphicon-remove-circle | Pruébalo | |
| glyphicon glyphicon-ok-circle | Pruébalo | |
| glyphicon glyphicon-ban-circle | Pruébalo | |
| glyphicon glyphicon-arrow-left | Pruébalo | |
| glyphicon glyphicon-arrow-right | Pruébalo | |
| glyphicon glyphicon-arrow-up | Pruébalo | |
| glyphicon glyphicon-arrow-down | Pruébalo | |
| glyphicon glyphicon-share-alt | Pruébalo | |
| glyphicon glyphicon-resize-full | Pruébalo | |
| glyphicon glyphicon-resize-small | Pruébalo | |
| glyphicon glyphicon-exclamation-sign | Pruébalo | |
| glyphicon glyphicon-gift | Pruébalo | |
| glyphicon glyphicon-leaf | Pruébalo | |
| glyphicon glyphicon-fire | Pruébalo | |
| glyphicon glyphicon-eye-open | Pruébalo | |
| glyphicon glyphicon-eye-close | Pruébalo | |
| glyphicon glyphicon-warning-sign | Pruébalo | |
| glyphicon glyphicon-plane | Pruébalo | |
| glyphicon glyphicon-calendar | Pruébalo | |
| glyphicon glyphicon-random | Pruébalo | |
| glyphicon glyphicon-comment | Pruébalo | |
| glyphicon glyphicon-magnet | Pruébalo | |
| glyphicon glyphicon-chevron-up | Pruébalo | |
| glyphicon glyphicon-chevron-down | Pruébalo | |
| glyphicon glyphicon-retweet | Pruébalo | |
| glyphicon glyphicon-shopping-cart | Pruébalo | |
| glyphicon glyphicon-folder-close | Pruébalo | |
| glyphicon glyphicon-folder-open | Pruébalo | |
| glyphicon glyphicon-resize-vertical | Pruébalo | |
| glyphicon glyphicon-resize-horizontal | Pruébalo | |
| glyphicon glyphicon-hdd | Pruébalo | |
| glyphicon glyphicon-bullhorn | Pruébalo | |
| glyphicon glyphicon-bell | Pruébalo | |
| glyphicon glyphicon-certificate | Pruébalo | |
| glyphicon glyphicon-thumbs-up | Pruébalo | |
| glyphicon glyphicon-thumbs-down | Pruébalo | |
| glyphicon glyphicon-hand-right | Pruébalo | |
| glyphicon glyphicon-hand-left | Pruébalo | |
| glyphicon glyphicon-hand-up | Pruébalo | |
| glyphicon glyphicon-hand-down | Pruébalo | |
| glyphicon glyphicon-circle-arrow-right | Pruébalo | |
| glyphicon glyphicon-circle-arrow-left | Pruébalo | |
| glyphicon glyphicon-circle-arrow-up | Pruébalo | |
| glyphicon glyphicon-circle-arrow-down | Pruébalo | |
| glyphicon glyphicon-globe | Pruébalo | |
| glyphicon glyphicon-wrench | Pruébalo | |
| glyphicon glyphicon-tasks | Pruébalo | |
| glyphicon glyphicon-filter | Pruébalo | |
| glyphicon glyphicon-briefcase | Pruébalo | |
| glyphicon glyphicon-fullscreen | Pruébalo | |
| glyphicon glyphicon-dashboard | Pruébalo | |
| glyphicon glyphicon-paperclip | Pruébalo | |
| glyphicon glyphicon-heart-empty | Pruébalo | |
| glyphicon glyphicon-link | Pruébalo | |
| glyphicon glyphicon-phone | Pruébalo | |
| glyphicon glyphicon-pushpin | Pruébalo | |
| glyphicon glyphicon-usd | Pruébalo | |
| glyphicon glyphicon-gbp | Pruébalo | |
| glyphicon glyphicon-sort | Pruébalo | |
| glyphicon glyphicon-sort-by-alphabet | Pruébalo | |
| glyphicon glyphicon-sort-by-alphabet-alt | Pruébalo | |
| glyphicon glyphicon-sort-by-order | Pruébalo | |
| glyphicon glyphicon-sort-by-order-alt | Pruébalo | |
| glyphicon glyphicon-sort-by-attributes | Pruébalo | |
| glyphicon glyphicon-sort-by-attributes-alt | Pruébalo | |
| glyphicon glyphicon-unchecked | Pruébalo | |
| glyphicon glyphicon-expand | Pruébalo | |
| glyphicon glyphicon-collapse-down | Pruébalo | |
| glyphicon glyphicon-collapse-up | Pruébalo | |
| glyphicon glyphicon-log-in | Pruébalo | |
| glyphicon glyphicon-flash | Pruébalo | |
| glyphicon glyphicon-log-out | Pruébalo | |
| glyphicon glyphicon-new-window | Pruébalo | |
| glyphicon glyphicon-record | Pruébalo | |
| glyphicon glyphicon-save | Pruébalo | |
| glyphicon glyphicon-open | Pruébalo | |
| glyphicon glyphicon-saved | Pruébalo | |
| glyphicon glyphicon-import | Pruébalo | |
| glyphicon glyphicon-export | Pruébalo | |
| glyphicon glyphicon-send | Pruébalo | |
| glyphicon glyphicon-floppy-disk | Pruébalo | |
| glyphicon glyphicon-floppy-saved | Pruébalo | |
| glyphicon glyphicon-floppy-remove | Pruébalo | |
| glyphicon glyphicon-floppy-save | Pruébalo | |
| glyphicon glyphicon-floppy-open | Pruébalo | |
| glyphicon glyphicon-credit-card | Pruébalo | |
| glyphicon glyphicon-transfer | Pruébalo | |
| glyphicon glyphicon-cutlery | Pruébalo | |
| glyphicon glyphicon-header | Pruébalo | |
| glyphicon glyphicon-compressed | Pruébalo | |
| glyphicon glyphicon-earphone | Pruébalo | |
| glyphicon glyphicon-phone-alt | Pruébalo | |
| glyphicon glyphicon-tower | Pruébalo | |
| glyphicon glyphicon-stats | Pruébalo | |
| glyphicon glyphicon-sd-video | Pruébalo | |
| glyphicon glyphicon-hd-video | Pruébalo | |
| glyphicon glyphicon-subtitles | Pruébalo | |
| glyphicon glyphicon-sound-stereo | Pruébalo | |
| glyphicon glyphicon-sound-dolby | Pruébalo | |
| glyphicon glyphicon-sound-5-1 | Pruébalo | |
| glyphicon glyphicon-sound-6-1 | Pruébalo | |
| glyphicon glyphicon-sound-7-1 | Pruébalo | |
| glyphicon glyphicon-copyright-mark | Pruébalo | |
| glyphicon glyphicon-registration-mark | Pruébalo | |
| glyphicon glyphicon-cloud-download | Pruébalo | |
| glyphicon glyphicon-cloud-upload | Pruébalo | |
| glyphicon glyphicon-tree-conifer | Pruébalo | |
| glyphicon glyphicon-tree-deciduous | Pruébalo |