Breaking

Post Top Ad

Your Ad Spot

miƩrcoles, 13 de noviembre de 2019

Que son los Icon Fonts CSS

Como sugiere el nombre los Icon Fonts son iconos utilizados mediante fuentes tipogrĆ”ficas, ya sean letras y nĆŗmeros o caracteres Unicode.  Un ejemplo en este caso puede ser muy ilustrativo.
Primero tenemos que definir la familia de fuentes a utilizar, los Icon Fontss en este caso. Para esto utilizamos la declaración @font-facestar
A continuación designamos las clases que utilizarĆ”n esta fuente. En este caso serĆ”n todas las clases que empiezan por "icon"
[class^="icon"] {font-family: 'miFuente';}
Hay varios mƩtodos de utilizar los icon-fonts. Los podemos utilizar directamente en el HTML:
<span class="icon-lapiz">&#xe905;</span>
O en el CSS como el content del pseudo-elemento :before.
.icon-lapiz:before{content:"\e905;"}
O todavĆ­a mejor: utilizando el valor de un atributo data-
<span class="icon" data-icon="&#xe905;"></span>

.icon:before{ content:attr(data-icon);}

 &#xe600;
 content: "\e600";
 data-icon="&#xe600;"

¿Por que utilizar Icon Fonts?

Utilizar iconos de fuentes tipogrƔficas tiene muchas ventajas:
  • - Podemos redimensionarlos fĆ”cilmente, exactamente como cambiamos el tamaƱo de las letras: basta con cambiar el tamaƱo de fuente ( font-size: 24px; )
  • - Podemos cambiar fĆ”cilmente el color de los iconos utilizando la propiedad color ( color:#abcdef; )
  • - Podemos aplicarlos sombras con text-shadow, y generalmente, podemos hacer casi todo lo que podemos hacer con fuentes.
  • - El soporte en los navegadores es excelente: incluso en IE6 ( segĆŗn Chris Coyerstar )
AdemƔs el internet esta lleno de Font Icons, que podemos descargar libremente, y tambiƩn podemos crear nuestras propias imƔgenes, con Adobe Illustrator por ejemplo, y transformarlas despuƩs en Font Icons.

¿Dónde puedo descargar Icon Fonts?

Font-Awesome (bootstrap)
Probablemente las mƔs conocidas Font Icons son las de Bootstrap que podemos descargar aquƭ:
http://fortawesome.github.io/Font-Awesome/star
Esta es una referencia de los iconos de Font Awsome:
http://fortawesome.github.io/Font-Awesome/icons/star
Si no queremos descargar los iconos de Font Awsome podemos enlazarlas como referencia externa:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Observación: Para probar los iconos de Font Awsome localmente ( en el ordenador de casa ) utilice el protocolo http:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Lea este tutorial: Creating a Social Media Menu from Icon Fonts with FontAwesomestar
Vea esta demonstración: Animated radial / circular menu
Otros recursos
Los de Foundation de Zurbstar tienen tambiĆ©n sus propios Icon Fonts que podemos descargar aquĆ­.star
Esta es una referencia de todos los iconos disponibles:star, y cómo utilizarlos.star
O tambiĆ©n podemos utilizar los iconos de ioniconsstar

Una alternativa mejor:

Normalmente en un proyecto utilizamos solo unos cuantos iconos. Entonces ¿por que descargar paquetes enteros de iconos?
Existe una alternativa mejor: IcoMoonstar y Fontellostar nos permiten crear juegos de iconos personalizados, donde podemos escoger y descargar solo aquellos Ć­conos que necesitamos. TambiĆ©n nos permiten personalizar el nombre de los iconos, y cambiar el código Unicode de estos.
Es mĆ”s: tanto IcoMoonstar como Fontellostar nos permiten importar nuestras propias imagenes vectoriales para transformarlas despuĆ©s en Font Icons.

Crear nuestros propios Icon Fonts

Los pasos a seguir son:
1. Crear una imagen vectorial ( utilizando Adobe Illustrator – por ejemplo ) y guardarla en formato SVGstar.
El sentido comĆŗn nos dice que tiene que ser una imagen que respecte algunas reglas como por ejemplo que aparezca en un lienzo cuadrado cuyas dimensiones sean un mĆŗltiple de 16 – por ejemplo. TambiĆ©n es importante que sea un solo trazado, bastante sencillo y optimizado para que no pese demasiado.
2. Importar la imagen SVG en Fontellostar o en IcoMoonstar, y editarla si necesario
Fontello
IcoMoon
3. Facultativo: escoger mĆ”s iconos de los existentes.
4. Descargar los Icon Fonts. Al descargar los Icon Fonts tanto Fontellostar como IcoMoonstar generan unos archivos de demonstración que nos permiten verificar la cualidad de los iconos creados, y nos sugieren los estilos CSS a utilizar.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

PƔginas