Awesore Iconos gratis para nuestra pagina

Awesome es una web, que dispone de una gran

cantidad de iconos o fuentes icónica (dibujos), que podemos añadir a nuestra entradas de forma sencilla.

Dispone de una gran cantidad de iconos numerados por las siguientes categorías.

Accesibilidad
Flechas
Audio
Vídeo
Negocio
Ajedrez
Código
Comunicación
Ordenadores
Moneda
Fecha y hora
Diseño Editores
Archivos Géneros
Manos

    Salud
Imágenes
    Interfaces
Mapas
    Objetos
    Pagos y compras
    Formas
    Spinners
    Deportes
    Estado
    Usuarios y Gente
    Vehículos
    Escritura

Lo mejor de esta pagina es que su distribución es de "Licencia Publica General".

Esto quiere decir que es un Software totalmente libre y podemos usarlo en nuestra pagina sin ningún tipo de problema.
Incluso se pueden usar con fines comerciales sin atribución.
Y lo mejor de todo es que podemos modificarlo a nuestro gusto tanto en tamaño, como en color, sombra, ect.

Como puedo usar Awesome en mi blog?

Podemos usar Awosore de diferentes formas en nuestro blog.

Pero la mas sencilla es usar la de tipo CSS.
Para ello nos vamos a Tema> Editar HTML y buscamos la etiqueta <Head>.
Justo despues pegamos el siguiente codigo:

Guardamos los cambios.
A la hora de incluirlo en nuestra entrada, tenemos que elegir primero la imagen a incluir.
Podemos ver el catalogo pinchando esta imagen.

Una vez selecionada la imagen que queremos usar, pinchamos en ella
Nos saldra esta otra pagina donde encontraremos el codigo del icono a insertar en la parte inferior de la pantalla.

Una vez tengamos el codigo del icono lo insertaremos en nuestra entrada en la edicion HTMl.

Jugando con los codigos

Como he comentado antes podemos cambiar el icono tanto de tamaño como de color, sombra ect..
Por ejemplo queremos cambiar el tamaño del icono usaremos este tipo de codigo:

Como podeis comprobar en la siguiente imagen:

Tambien podemos cambiar el color usando las diferentes opciones:

Como por ejemplo:

Font-size: Tamaño del icono

Color: Color del icono

margin: 5px . Tamaño del margen

Iconos Giratorios

Tambien podemos usar en nuestra pagina la seccion de iconos giratorios.

Useremos la clase fa-spin para hacer rotar cualquier ícono y use fa-pulse para que gire con 8 pasos.

Funciona especialmente bien con fa-spinner y todo en la categoría de iconos giratorios.

En este caso he usado el siguiente codigo:

Lista de Iconos

Ya hemos aprendido varias formas de insertar nuestros iconos, pero tambien lo podemos hacer mediante una lista como vemos en la imagen.

Home

Informacion

Library

Applications

Settings

<div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>
<div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Informacion</div>
<div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
<div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
<div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>