Las fuentes de los íconos son impresionantes para su sitio.

Has oído hablar de iconos y es casi seguro que has oído hablar de fuentes, pero ¿qué es un Fuente de icono? Hoy te mostraré qué son las fuentes de los íconos y cómo puedes usarlas para animar tu sitio web. Empecemos.

¿Qué son las fuentes de iconos??

Las fuentes de iconos son exactamente las mismas que “regular” fuentes: definen la apariencia de un texto. La gran diferencia aquí es que las fuentes de iconos no contienen letras y números, sino símbolos e iconos. Es posible que esto te confunda, ya que de qué sirve una fuente si no puedes escribirle cartas a tu madre.!

Las fuentes de iconos se utilizan principalmente para estilizar sitios web. Como están basados ​​en vectores, pueden ser redimensionados, movidos, diseñados y modificados utilizando CSS 5 Baby Steps to Learning CSS y Convirtiéndose en un Kick-Ass CSS Sorcerer 5 Baby Steps to Learning CSS y Convirtiéndose en un Kick-Ass CSS Sorcerer CSS es el Las páginas web de cambios más importantes se han visto en la última década, y allanaron el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Leer más. Esto proporciona una gran ventaja sobre los métodos de diseño tradicionales, como las imágenes. La apariencia de un gran número de iconos se puede cambiar con solo unas pocas líneas de código. No tiene que editar ninguna imagen, abrir Photoshop o cargar los nuevos archivos; simplemente escriba el código.

Empezando

Usaré Font Awesome para estos ejemplos, pero la teoría se puede aplicar a muchos otros paquetes de fuentes..

Aquí está el HTML de inicio:

Esta es la cantidad mínima de HTML necesaria para crear una página web. No explicaré la mayoría, ya que lo hemos explicado en nuestra guía sobre cómo hacer un sitio web..

La línea más importante es la siguiente:

Esto carga la hoja de estilo Font Awesome desde su CDN. Sin esta línea, su sitio web no sabría qué es Font Awesome, por lo que es muy importante. Esta hoja de estilo maneja todo el arduo trabajo de incrustar fuentes web y, en general, le facilita las cosas..

Los iconos de fuentes impresionantes se definen por las clases de CSS agregadas a yo etiquetas Estos fueron elegidos porque no tienen ningún navegador o estilo definido por defecto, por lo que sus iconos no se desordenarán. Alternativamente, puede agregar las clases a lapso etiquetas, pero eso hace desordenar su HTML.

Aquí está el uso básico. Pon esto dentro de tu cuerpo etiquetas:

 Mi primer icono

Esto es lo que parece:

¿Qué tan fácil fue eso? Vamos a descomponerlo. Hay dos clases necesarias para que Font Awesome funcione. El primero se llama fa, que significa fuente impresionante. Esto es necesario para cualquier icono, independientemente de cuál utilice. La segunda clase especifica el ícono en particular que desea usar: esto podría ser cualquier cosa, un avión, una persona o una tarjeta de crédito. Esto también es prefijado con fa, y como este es un icono de engranaje, su nombre es fa-cog. Puede ver una lista de todos los iconos en Font Awesome en su sitio web.

Intenta cambiar el icono del engranaje a cualquier otro..

Yendo más profundo

Una vez que sepas lo básico, es hora de algunos trucos avanzados..

Si no desea escribir su propio CSS, puede usar los estilos integrados en Font Awesome. Hay muchas clases que puedes usar para agrandar los íconos:

Otra clase útil para usar es la giro de fa. Esto hará que los iconos giren, y cuando se combina con las clases de tamaño anteriores, puede producir algunos efectos agradables. Aquí está el código:

Aquí está el resultado:

Es fácil rotar los íconos - use la fa-rotar clase:

El número al final define los grados de rotación para el icono, pero no se deje llevar. Estas limitado a 90, 180, o 270.

Un último truco que puedes hacer es apilar. los fa-stack La clase te permite combinar dos o más iconos juntos. Aquí está el código:

Esto es lo que parece:

Una vez que comience a combinar todas estas clases, las posibilidades son infinitas..

CSS personalizado

Porque las fuentes de iconos son sólo fuentes, puede aplicarles un estilo a CSS como lo haría con cualquier otro elemento. Usando un poco de CSS3 puede recorrer un largo camino:

Aquí está el HTML para ese icono:

Aquí está el CSS:

@keyframes mueve desde margen izquierdo: 0;  a margen izquierdo: 400 px;  .bike nombre-animación: mover; animación-duración: 4s; 

Este CSS es bastante básico, pero tiene un gran impacto. Sin embargo, este no es un tutorial de CSS, por lo que es posible que desee aprender CSS Los próximos pasos en el camino para convertirse en un maestro Jedi de CSS Los próximos pasos en el camino para convertirse en un maestro de Jedi en CSS CSS es absolutamente una de las tecnologías más importantes. Hoy en día en Internet, y aunque la mayoría de las personas admite saber un poco de HTML, generalmente no tenemos ni idea acerca de CSS. La última vez que te presenté ... Lee más si quieres saber más sobre el funcionamiento interno.

Puedes hacer algunas cosas especiales si realmente quieres:

Esto tartamudea un poco para reducir el tamaño del archivo para la web. Aquí está el HTML:

Aquí está el CSS:

@keyframes fade from opacity: 0;  a opacidad: 1;  .person opacidad: 0; nombre de la animación: fade;  # p1 color: rojo; animación-duración: 2s;  # p2 color: naranja; animación-duración: 4s;  # p3 color: verde; animación-duración: 6s;  # p4 animation-duration: 8s; 

Como en el ejemplo anterior, esto usa animaciones CSS3. Una animacion llamada descolorarse se crea, y cada ícono de persona implementa esta animación con diferentes tiempos. Hay mucho potencial para volverse loco con estos iconos y CSS3.

Eso es todo por hoy. ¡Ahora debería poder utilizar las fuentes de iconos para animar su sitio web! Si aún no está seguro de sus habilidades, consulte estos sitios de plantillas CSS 11 Sitios de plantillas CSS: ¡No comience desde cero! 11 sitios de plantillas CSS: ¡No empieces desde cero! Hay miles de plantillas CSS gratuitas disponibles en línea, todas abarcando las tendencias y tecnologías de diseño moderno. Puede usarlos en su forma original o personalizarlos para que sean suyos. Lea más, o estos canales de YouTube para comenzar. ¿Quiere aprender diseño web? 7 canales de YouTube para comenzar ¿Quieres aprender diseño web? 7 canales de YouTube para comenzar You YouTube tiene miles de videos y canales para principiantes de diseño web. Aquí nos fijamos en algunos de los mejores para empezar. Leer más con diseño web.

¿Aprendiste algo nuevo hoy? ¿Cuál es tu fuente favorita de iconos? Háganos saber en los comentarios a continuación.!

Explorar más sobre: ​​CSS, HTML, Diseño Web..