Ir al contenido principal

Creación de guías en Biblioguías UCM

Manual básico para la creación de guías en LibGuides

Etiquetas

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:

Ejemplo Nuevo

Ejemplo Nuevo

Ejemplo Nuevo
Ejemplo Nuevo
<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:

Por defecto Éxito Aviso Importante

<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>

Iconos

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

 

Añadir iconos a los menús laterales

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:

Insertar padding-right para separar del texto