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: