Lo que he aprendido: Font Awesome y Jekyll

Os dije ayer que estaba personalizando la web de pan con símbolos de Font Awesome, hoy os voy a contar un poquito más cómo va el rollo.


Font Awesome es una colección de iconos minimalistas con licencia libre. Tienen la particularidad de que son gráficos vectoriales con lo que quedan bien en todos los tamaños, haciéndolos especialmente útiles para poner en webs.

Para usarlos no tenemos más que descargarnos la carpetilla y añadir a nuestro head un link al CSS correspondiente. En mi caso como uso Jekyll y GitHub Pages, he añadido la siguiente línea al head del archivo _layouts/default.html:

<link rel="stylesheet" href="{{ site.github.url }}/font-awesome-4.7.0/css/font-awesome.min.css">

Ahora cuando queramos usar un icono, hacemos:

<i class="fa fa-ICONO"></i>

Donde ICONO es el nombre del icono en cuestión. Los iconos con sus respectivos nombre están en esta lista. También podemos cambiarles el tamaño, por ejemplo, para hacerlo el doble de grande usamos fa-2x:

<i class="fa fa-ICONO fa-2x"></i>

Podemos agrandarlo hasta 5x

Se pueden usar en cualquier sitio, ya que funcionan como si fueran letras. Por ejemplo, para ponerlos como ítems de una lista:

<ul class="fa-ul">
    <li><i class="fa-li fa fa-ICONO"></i>Elemento 1</li>
</ul>

Tenéis más ejemplos en la web de Font Awesome

A mí me gustan especialmente para las barras de navegación, tengo que averiguar cómo unirlos a la barra de navegación automática que me hace Jekyll.

Como cosa curiosa antes de acabar: hay hasta un generadorde favicons para símbolos de Font Awesome. Muy chulo todo.

Nada más, continuo investigando.

Anuncios

Un pensamiento en “Lo que he aprendido: Font Awesome y Jekyll

  1. Pingback: En qué ando: primera quincena de marzo | Onda Hostil

¡Opina sin miedo! (Puedes usar Markdown)

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s