¿Cómo se generó una fuente de iconos con Fontello, para el multimedia Tutoriales de Raspberry Pi? 

La utilización de iconos en páginas web es un aspecto esencial para el establecimiento de un correcto lenguaje visual, “Los iconos funcionan como condensadores de información, porque los reconocemos como la representación de un concepto y son fácilmente memorizables.” (Manrique Huacacolque, 2020, p. 7), pero el uso inadecuado de las imágenes dentro de una web puede generar lentitud a la hora de la carga.

Utilizar un número limitado de iconos en formato de imagen no tendría que generar dificultades, solamente con cuidar su peso y dimensiones, no debería presentarse ningún problema relevante. Sin embargo, si el mismo icono o imagen va a ser empleado en diferentes versiones de color y dimensiones, dentro de un mismo proyecto, esto limitaría la optimización. En otras palabras, se realizaría la tarea, pero no de forma eficiente y tampoco utilizando la menor cantidad de recursos posibles.

En el proceso de producción del multimedia Tutoriales de Raspberry Pi, realizado por el Programa de Producción Electrónica Multimedial, de la Dirección de Producción de Material Didáctico, de la Universidad Estatal a Distancia (Costa Rica), se necesitaba emplear la misma imagen en diversas dimensiones y colores, por lo que, para no comprometer el perfeccionamiento del proyecto, se generó una fuente de iconos con Fontello. Es decir, se convirtieron los iconos en letras, lo que permitió cambiarles el color o el tamaño fácilmente, con el uso de instrucciones en CSS (siglas en inglés de Cascading Style Sheets, hojas de estilo en cascada, en español).

Fontello es una herramienta para la creación de fuentes tipográficas, que trabaja bajo licencia SIL. Esta licencia fue creada por SIL International e indica que un software es libre con código abierto, es empleada para tipos de letra Unicode (sistema de codificación de caracteres usado en las computadoras para almacenar e intercambiar textos). Además, Fontello brinda la posibilidad de generar iconos nuevos o de utilizar cualquier colección existente de su plataforma (Fontello, s.f.; SIL International, s.f.). 

La creación e implementación de una colección de iconos, para el multimedia Tutoriales de Raspberry Pi, fue muy sencilla. Los pasos que se siguieron se listan, a continuación:

1. Ingreso a Fontello: se accedió a la dirección electrónica https://fontello.com/ 

2. Carga de los iconos nuevos: en la parte superior derecha de la pantalla, aparece un botón con un icono de “llave francesa”, al hacer clic se despliega un menú vertical, se eligió la primera opción “Import”, que permite la carga de nuevos iconos. Se recomienda utilizar archivos vectoriales, con el formato SVG (siglas en inglés de Scalable Vector Graphics, gráficos de vectores escalables, en español).

3. Configuración de los valores de los iconos: una vez cargados los iconos, aparecen en el área llamada “Custom Icons”, al colocar el cursor sobre la imagen, se verá un botón en forma de lápiz, al hacerle clic se abre una ventana emergente que contiene los valores configurables del icono, entre esos valores se encuentra el valor “Default Code (hex)”, este es muy importante, ya que será el identificador del icono dentro del código CSS.

4. Descarga de la fuente tipográfica: primero se debieron seleccionar los iconos que se incluirían dentro de la fuente tipográfica. En la esquina superior derecha de la pantalla, está el botón “Download Webfont”, que muestra la cantidad de iconos que se incluirán en la fuente. Al pulsar este botón, se descargará la fuente tipográfica, en una carpeta comprimida, en formato ZIP.

5. Incluir la fuente tipográfica en el multimedia Tutoriales de Raspberry Pi: primero, se debe descomprimir la carpeta Zip, ya que contiene una subcarpeta llamada “CSS”, otra denominada “font”, un archivo “config.json”, otro “demo.html” y, por último, “README.txt”. En el proyecto solo se incluyeron la subcarpeta “CSS”, la subcarpeta “font” y el archivo “config.json”.

A continuación, se especificarán los pasos que se siguieron, para incluir la fuente tipográfica al multimedia Tutoriales de Raspberry Pi:

1. Primero, se incluyó la fuente por medio del código CSS, en la hoja de estilo del proyecto. Para tener una guía sobre este proceso, tome en cuenta el ejemplo que le ofrece Fontello, en el archivo “demo.html”:

@font-face { 

      font-family: 'fontello'; 

      src: url('../font/fontello.eot?630262'); 

      src: url('../font/fontello.eot?630262#iefix') format('embedded-opentype'), 

      url('../font/fontello.woff?630262') format('woff'), 

      url('../font/fontello.ttf?630262') format('truetype'), 

      url('../font/fontello.svg?630262#fontello') format('svg'); 

      font-weight: normal; 

      font-style: normal; 
} 

2. Se creó una clase en CSS, en la hoja de estilo del proyecto, para configurar el estilo de la fuente Fontello:

.ico-fontello{ 

      font-family: "fontello"; 

      font-style: normal; 

      font-weight: normal; 

      speak: none; 

      text-decoration: inherit; 

      width: 1em; 

      text-align: left; 

      font-variant: normal; 

      text-transform: none; 

      line-height: 1.22em; 

      margin-left: 5px; 

     -webkit-font-smoothing: antialiased; 

     -moz-osx-font-smoothing: grayscale; 
 } 

3. En el header o encabezado del multimedia Tutoriales de Raspberry Pi, se hizo referencia al archivo “animation.css”, que se encuentra en la subcarpeta “CSS”, que está dentro de la carpeta en la que se descargó la tipografía de Fontello:

<link rel="stylesheet" type="text/css" href="css/animation.css"> 

4. Como último paso, recuerde que para cada icono se configuró con un valor “Default Code (hex)” desde Fontello, si no recuerda estos valores puede ir a la subcarpeta “CSS”, al archivo “fontello-codes.css”, donde podrá ver la lista de iconos, con su respectivo valor. Al conocer este valor, la inclusión de cada icono es muy sencilla:

<div id="boton_buscar><p class="ico-fontello">&#xe801;</p></div> 

<i class="ico-fontello" style="font-size: 140px; color: #722E66;">&#xe800;</i>

Fontello permite, de forma sencilla y rápida, crear una fuente a partir de iconos, para redimensionar los caracteres sin perder la calidad. Además, es posible proteger los iconos personalizados, porque al convertirlos en una fuente tipográfica se evita la descarga directa.

Como es una herramienta gratuita, no hay ningún obstáculo para utilizarla. Adicionalmente, es muy completa, ya que la descarga incluye un demo (un archivo de demostración), que sirve de guía para incluir la fuente en los proyectos.

Aunque existen otras técnicas mucho más complejas, para incluir iconos dentro de un sitio o aplicación web, recomendamos esta opción porque es muy fácil, implica muy pocos pasos y solo demanda conocimientos básicos en desarrollo web.

Otras herramientas, similares a Fontello, son: Font Awesome e IcoMoon.

Los invitamos a ver el multimedia Tutoriales de Raspberry Pi, en la siguiente dirección web: https://multimedia.uned.ac.cr/pem/raspberry_pi/

Referencias: 

Fontello. (s.f.). Sitio oficial. https://fontello.com

Manrique, J. G. (2020). ¿Qué formato usar? Ventajas del uso de Material Design a la hora de crear una página. https://hdl.handle.net/20.500.12637/343 

SIL International. (s.f.). SIL Open Font License (OFL). https://scripts.sil.org/cms/scripts/page.php?id=OFL 

Cite este texto:

Ulate Paniagua R. (2022) ¿Cómo se generó una fuente de iconos con Fontello, para el multimedia Tutoriales de Raspberry Pi? . Sonar Multimedia [blog]. https://multimedia.uned.ac.cr/pem/wp/sonar-multimedia/?p=41