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

Anuncio

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 las fuentes "normales": definen el aspecto y la sensación de un 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 pasos de bebé para aprender CSS y convertirse en un hechicero CSS increíbleCSS es el cambio más importante que las páginas web han 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 ... Lee mas

. 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 es necesario que edite ninguna imagen, abra Photoshop o cargue los archivos nuevos; simplemente escriba el código.

Empezando

Estaré usando 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 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, facilita mucho las cosas.

Los iconos de Font Awesome están definidos por las clases CSS agregadas a yo Etiquetas Se eligieron porque no tienen ningún navegador o estilo definido predeterminado, 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 iconos en Font Awesome en su sitio web.

Intente cambiar el icono de la rueda dentada 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, 180o 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 realmente 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 ícono:

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 10 ejemplos simples de código CSS que puedes aprender en 10 minutos¿Quieres saber más sobre el uso de CSS? Para comenzar, pruebe estos ejemplos básicos de código CSS, luego aplíquelos a sus propias páginas web. Lee mas 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: 6s; } # p4 {animación-duración: 8s; }

Como en el ejemplo anterior, esto usa animaciones CSS3. Una animación llamada desvanecerse 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!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. Lee mas o estos Canales de YouTube para comenzar ¿Quieres aprender diseño web? 7 canales de YouTube para comenzarYouTube tiene miles de videos y canales para principiantes en diseño web. Aquí vemos algunos de los mejores para comenzar. Lee mas con diseño web

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