Si queremos resaltar, por ejemplo, la novedad o importancia de un elemento de un artículo o recurso, debemos emplear la clase .label, seguida de una de sus clases contextuales .label-default, .label-primary, .label-success, .label-info, .label-warning o .label-danger, dentro de un elemento <span> para crear la etiqueta:
<h3>Ejemplo <span class="label label-default">Nuevo</span></h3><h4>Ejemplo <span class="label label-default">Nuevo</span></h4><h5>Ejemplo <span class="label label-default">Nuevo</span></h5><h6>Ejemplo <span class="label label-default">Nuevo</span></h6>
Se utilizarán las siguientes clases contextuales:
<span class="label label-default">Por defecto</span><span class="label label-success">Éxito</span><span class="label label-warning">Aviso</span><span class="label label-danger">Importante</span>
Para insertar iconos, deberemos emplear la librería de iconos Font Awesome.
Por ejemplo, para insertar el icono , usaremos el siguiente código:
<i aria-hidden="true" class="fa fa-address-book-o"></i>
Para aumentar el tamaño de los iconos en relación a su contenedor, emplearemos las clases fa-lg (aumento del 33%), fa-2x, fa-3x, fa-4x o fa-5x:
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
En caso de que queramos añadir iconos a los menús laterales, al crear o editar una página incluiremos el HTML de Font Awesome antes del título de la página.
Consejo: Incluir padding-right al HTML para añadir un poco de espacio a la derecha del icono:
