blog article

Los mejores Icon Fonts del 2018 - Zagi Font

Es más sencillo para una persona ubicar el ícono del famoso ¨me gusta¨ a revisar en toda la página en donde diga esa frase y hacer clic. Esto se debe a que el cerebro procesa la información de forma más rápida si se le presenta en forma de imagen a en forma de texto, debido a esto tiende a recordar mejor el contenido visual ya que este se conecta más con los recuerdos y las emociones.

Los font icons son una simbología que representa palabras o acciones en forma de íconos, presentadas como una tipografía instalable en la computadora y que puede ser utilizada en páginas web mediante el lenguaje css.

A nivel de página web es más efectivo utilizar icon fonts debido a que las imágenes pueden perder calidad y ralentiza los tiempos de carga de una página web. Si usted tiene una página web necesita que esta cargue rápido, eso facilita la indexación por parte de los Googlebots y mejora la experiencia del usuario al no tener que esperar esas largas cargas de pantalla.

En nuestro proceso de creación de páginas web en Zagirova Design utilizamos páginas como Font Awesome para localizar una fuente que se adapte con el diseño que queremos realizar, sin embargo nos encontramos con una necesidad de mercado al no conseguir una variedad al querer realizar transmitir un mensaje más específico.

Es por eso que nos dimos la tarea de crear nuestra propia fuente de icons font y así contribuir al mercado y facilitar el trabajo a los desarrolladores de páginas y blogs.

Con más de 100 opciones a elegir te brindamos una solución para transmitir mensajes de forma rápida y presentar tu contenido con nuestros ZagiFont.

Ofrecemos un formato que permite modificación de estilo y que además es completamente grátis.

VER ZAGIFONT

¿Cómo utilizar icon fonts?

Hay diferentes métodos, en este artículo le explicaremos diferentes maneras y puede usar la que más se adapte a sus necesidades.

Ajustar las fuentes del icono en HTML

La primera opción es simple. Debajo agregamos una clase al tag. El carácter ha sido asignado a un icono específico en nuestro fuente.

<a href="http://amazon.com"> <span class="zagi-regalo"> <span>Comprar regalo</span> </a>

Para mostrar el icono se utiliza CSS para el estilo .icon por lo que utiliza el icono de la fuente elegida.

.icon {
font-family: 'zagifont';
}

Usar contenido generado CSS

En lugar de incluir el carácter directamente en nuestro html, usamos algunos contenidos generados por css. Se debe eliminar el tramo y el carácter y mover la clase de icono al enlace. También agregamos otra clase 'regalo' al enlace.

<a href="http://amazon.com" class="zagi-regalo"> Comprar regalo </a>

La magia sucede en CSS. Primero asignamos la fuente del icono a la clase del icono. A continuación, usamos el pseudo element :before en la clase de regalo para servir al personaje. También funciona cuando se desea el icono a la derecha.

.zagi-regalo {
   font-family: 'zagifont';
}
.zagi-regalo:before {
   content: "\3d";
}

Atributo de icono de datos

Un método similar al anterior, se utiliza el atributo de datos HTML5. Aquí crearemos un atributo de ícono de datos.

<a href="http://amazon.com" class="zagi-regalo" data-icon="s"> Comprar regalo </a>

Como antes, agregaremos la fuente elegida a la clase de icono, pero ahora crearemos el carácter haciendo referencia a lo que está en el ícono de datos.

.icon {
   font-family: 'zagifont';
}
.zagi-regalo:before {
  content: "\3d";
}

Los icon fonts tienen muchas ventajas, entre ellas están que puedes modificarles el tamaño y el color sin que se modifique la calidad de la imagen, mejora la velocidad de pantalla de carga, lucen genial y la mejor parte es que lo puedes descargar totalmente gratis.

Le invitamos a descargar y optimizar sus web con nuestros ZagiFont y compartir sus imágenes con nosotros en las redes.

DESCARGAR

Blog Font