Alternativa a FontAwesome

Siempre hemos deseado alguna Alternativa a FontAwesome bien sea por que deseamos algunos iconos distintos o por que no requerimos tantos como los que trae este servicio. En este artículo te mostraré una interesante alternativa a FontAwesome.

En varios de los proyectos en los que he trabajado he utilizado esta excelente librería, tiene una gran cantidad de iconos en diferentes categorías, e incluso ahora cuentan con una versión pro.

Pero, si quieres algo distinto, ¿tenemos alguna alternativa a FontAwesome?, la respuesta es SI.

 

FONTISTO

Encontré esta muy buena opción mientras revisaba diferentes feeds, y me pareció una joya, tanto así que la uso ya con constancia. Cuenta con más de 600 iconos (siguen agregando), muy bien categorizados, la presentación del sitio es muy buena y la manera de utilizarlos es bastante sencilla.

Fontisto Alternativa a FontAwesome

 

¿Y como lo utilizo?

Lo primero es integrar a nuestro proyecto el css que genera Fontisto. Podemos hacerlo de 2 maneras, o bien descargando el paquete mas reciente, o hacerlo a traves del CDN proporcionado por el propio servicio, optaremos por la segunda.  Recordando que debe incluirse dentro de las etiquetas <head>.

CDN: <link rel=“stylesheet href=“https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css></i>

 

Luego basta con utilizar algún código de icono como prueba(ya definiremos la estructura).

<i class=«fi fi-facebook»><i> en este momento deberíamos visualizar el icono de Facebook. Si no es así puede que se haya fallado en el proceso anterior, así que puedes revisar nuevamente.

 

Estructura de llamado de iconos 

Si analizamos el ejemplo anterior del icono de Facebook vemos:

  • La apertura y cierre de una etiqueta <i>
  • Un atributo clase con 2 valores, fi y fi-facebook, que definen el primero que pertenece al grupo de iconos de fontisto, heredando los estilos definidos, y el segundo indica cual icono de ese conjunto hemos seleccionado.

 

Y ¿Como se cuales son los iconos?

Si ingresamos a https://www.fontisto.com/icons vamos a encontrar el directorio completo de iconos de Fontisto, agrupado en categorias, al seleccionar uno vamos a poder ver la clase correspondiente a ese icono. Ya con eso podremos añadirlo a nuestro desarrollo.

Alternativa a FontAwesome

 

Listo ahora solo debes revisar las categorias, elegir los que mas convengan a tu proyecto y como es claro adaptar el estilo. Veamos un ejemplo sencillo.

 

See the Pen Fontisto libreria de iconos by Mario Germán (@mager19) on CodePen.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *