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.
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.
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.
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:
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
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".Imágenes
Interfaces
Mapas
Objetos
Pagos y compras
Formas
Spinners
Deportes
Estado
Usuarios y Gente
Vehículos
Escritura
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:
Para ello nos vamos a Tema> Editar HTML y buscamos la etiqueta <Head>.
Justo despues pegamos el siguiente codigo:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
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.
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:
<i class="fas fa-camera-retro fa-xs"></i>
<i class="fas fa-camera-retro fa-sm"></i>
<i class="fas fa-camera-retro fa-lg"></i>
<i class="fas fa-camera-retro fa-2x"></i>
<i class="fas fa-camera-retro fa-3x"></i>
<i class="fas fa-camera-retro fa-5x"></i>
<i class="fas fa-camera-retro fa-7x"></i>
<i class="fas fa-camera-retro fa-10x"></i>
<i class="fas fa-camera-retro fa-sm"></i>
<i class="fas fa-camera-retro fa-lg"></i>
<i class="fas fa-camera-retro fa-2x"></i>
<i class="fas fa-camera-retro fa-3x"></i>
<i class="fas fa-camera-retro fa-5x"></i>
<i class="fas fa-camera-retro fa-7x"></i>
<i class="fas fa-camera-retro fa-10x"></i>
Como podeis comprobar en la siguiente imagen:
Tambien podemos cambiar el color usando las diferentes opciones:
<div style="font-size:3px; color:#ff8000">
<i class="fas fa-camera-retro"></i>
</div>
<i class="fas fa-camera-retro"></i>
</div>
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:
<div class="fa-3x">
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
</div>
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
</div>
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>
<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>
No hay comentarios:
Publicar un comentario
Deja tu comentario y en breve te contestaremos