Las fuentes de íconos son impresionantes para su sitio Aquí le explicamos por qué

Has oído hablar de iconos y casi seguro has oído hablar de las fuentes, pero ¿qué es un Fuente de icono? Hoy te mostraré qué son las fuentes de í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 el aspecto de una pieza de texto. La gran diferencia aquí es que las fuentes de íconos no contienen letras y números, sino símbolos e íconos. Esto puede confundirte, ya que de qué sirve una fuente si no puedes escribir cartas a tu madre!

Las fuentes de iconos se utilizan principalmente para diseñar sitios web. Como están basados ​​en vectores, se pueden redimensionar, mover, diseñar y alterar usando CSS 5 Baby Steps para aprender CSS y convertirse en un Kick-Ass CSS Sorcerer 5 Baby Steps para aprender CSS y convertirse en un Kick-Ass CSS Sorcerer CSS es el Las páginas web de cambio más importantes que hemos visto en la última década, y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la estructura semántica ... Esto proporciona una gran ventaja sobre los métodos de diseño tradicionales, como las imágenes. La apariencia de una gran cantidad 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, solo 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:

    Fuentes de icono de MUO html font-family: helvetica, arial;      

Esta es la cantidad mínima de HTML requerida para producir una página web. No explicaré la mayoría, ya que lo hemos cubierto 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 de su CDN. Sin esta línea, su sitio web no sabría qué es Font Awesome, por lo que es bastante importante. Esta hoja de estilo maneja todo el trabajo duro de incrustar fuentes web y, en general, hace las cosas mucho más fáciles para usted..

Los iconos de Font Awesome están definidos por las clases CSS agregadas a yo Etiquetas Se eligieron ya que no tienen ningún navegador o estilo predeterminado definido adjunto, por lo que sus íconos no se estropearán. Alternativamente, puede agregar las clases a lapso etiquetas, pero eso abarrota tu HTML.

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

 Mi primer icono

Así es como se ve:

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

Intenta cambiar el ícono del engranaje a otro.

Yendo más profundo

Una vez que conozca los conceptos básicos, 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 puede usar para agrandar los íconos:

Otra clase útil para usar es la fa-spin. Esto hará que los iconos giren y, cuando se combinen 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 iconos: use el fa-rotar clase:

El número al final define los grados de rotación del icono, pero no se deje llevar. Estás limitado a 90, 180, o 270.

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

Así es como se ve:

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

CSS personalizado

Porque las fuentes de íconos son sólo fuentes, puede diseñarlas con CSS como lo haría con cualquier otro elemento. Usar un poco de CSS3 puede ser muy útil:

Aquí está el HTML para ese icono:

Aquí está el CSS:

@keyframes move from margin-left: 0;  a margin-left: 400px;  .bike nombre-animación: mover; duración de la animació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 CSS Los próximos pasos en el camino para convertirse en un maestro Jedi CSS CSS es absolutamente una de las tecnologías más importantes en todo en Internet hoy, y aunque la mayoría de las personas admiten saber un poco de HTML, generalmente no tenemos idea de CSS. La última vez que te presenté ... 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-animación: fade;  # p1 color: rojo; duración de la animación: 2s;  # p2 color: naranja; duración de la animación: 4s;  # p3 color: verde; duración de la animación: 6 s;  # p4 duración-animación: 8s; 

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

Eso es todo por hoy. ¡Ahora debería poder utilizar Icon Fonts para animar su sitio web! Si aún no está tan 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 comience desde cero! Hay miles de plantillas CSS gratuitas disponibles en línea, que abarcan todas las tendencias y tecnologías de diseño moderno. Puede usarlos en su forma original o personalizarlos para que sean suyos. , o estos canales de YouTube para comenzar ¿Quieres aprender diseño web? 7 canales de YouTube para comenzar ¿Desea aprender diseño web? 7 canales de YouTube para comenzar YouTube tiene miles de videos y canales para principiantes en diseño web. Aquí vemos algunos de los mejores para comenzar. con diseño web.

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