Cómo convertir tus iconos en una fuente web
Había creado algunos íconos para el rediseño de un sitio web que estaba haciendo, y predije el nuevo sitio en un viejo iPad. El diseño se veía bien en el tamaño normal, pero acercándome a una parte de la página, de repente vi que mi ícono era un desastre borroso, mientras que el encabezado basado en texto seguía siendo nítido y nítido. En un iPad con pantalla Retina más nuevo, los iconos no se veían muy nítidos, incluso con un tamaño normal.
La primera idea que tuve fue crear imágenes de sprites de doble tamaño, configurándolas para que se muestren a la mitad de su tamaño usando CSS. Si bien esto los hizo ver mejor en una pantalla Retina de tamaño normal, tan pronto como comenzó a pellizcar y acercar, la borrosidad volvió. Pero el texto seguía siendo tan claro y nítido.
La respuesta fue obvia. Necesitaba convertir mis iconos en una fuente.
En este tutorial, veremos cómo convertir iconos vectoriales en una fuente web usando una gran aplicación web gratuita llamada IcoMoon. Luego, veremos cómo usar los archivos de fuente generados y CSS en una página web.
Las ventajas de usar una fuente de icono
Una fuente de icono tiene varias ventajas sobre las imágenes de mapa de bits, además de la nitidez de la imagen.
- Idoneidad: una fuente de icono será mucho más pequeña en tamaño de archivo que una serie de imágenes, especialmente si ha utilizado imágenes de doble tamaño para pantallas Retina. Y una vez que la fuente se haya cargado, los iconos se mostrarán instantáneamente, sin necesidad de descargar una imagen.
- Escalabilidad: una fuente de icono se puede configurar en cualquier tamaño configurando
font-sizepropiedad en el CSS que lo acompaña. Esto le permite experimentar con diferentes tamaños; mientras que, para las imágenes de mapa de bits, debería generar un archivo de imagen en cada tamaño. - Flexibilidad: los efectos de texto se pueden aplicar fácilmente a su icono, incluidos los colores, las sombras paralelas y los estados de sustitución. También se mostrarán bien contra cualquier color o fondo de imagen.
- Compatibilidad: las fuentes web son compatibles con todos los navegadores modernos y navegadores heredados, incluso con IE 6 o versiones anteriores.
¡Entonces empecemos!
Creando una fuente de icono
Las fuentes Symbol pueden construirse usando una aplicación dedicada de creación de fuentes como Glifos , pero una herramienta de tipografía profesional va más allá de las necesidades o requisitos de construir una fuente de icono simple, en la cual la relación entre caracteres (es decir, interletraje y ligaduras) no es importante.
Por mucho, la forma más fácil es usar una gran aplicación gratuita en línea llamada IcoMoon , por Keyamoon, que elimina todas las molestias de convertir símbolos en una fuente web.
Esta aplicación HTML5 elimina todo el dolor de crear archivos de fuentes para usos simples, como la creación de fuentes de íconos. IcoMoon viene con una serie de conjuntos de iconos ya cargados, y puede agregar más a su biblioteca, la mayoría de los cuales se pueden utilizar de forma gratuita (consulte la licencia). Si busca íconos bastante estándar, como "descarga de archivos" y "carrito de compras", puede descubrir que usar uno de estos es preferible a crear uno propio.
Paso a paso
1. Prepare sus ilustraciones
Para empezar, debe crear los iconos en un programa de dibujo vectorial que sea capaz de exportar al formato SVG, como Illustrator o Inkscape.
Mientras diseña, puede trabajar con los colores que desee, pero los iconos deben ser de un solo color. Asegúrese de que cada icono tenga aproximadamente el mismo tamaño. Tener un icono mucho más alto o más largo que otro hará que sea difícil construir una fuente consistente. Aquí, he tenido que reducir el ancho del ícono de mi dirigible para que coincida con los demás.
2. Limpiar
Compruebe con cuidado cada icono para asegurarse de que no tiene imperfecciones: los detalles que se ven bien en tamaños más pequeños pueden ocultar pequeños defectos cuando se acerca el zoom. En el icono que se muestra a continuación, necesito eliminar los escalones dentados que se han deslizado al superponer elementos.
En Illustrator, use la herramienta Pathfinder para unir elementos superpuestos, y el elemento Minus Front para eliminar elementos recortados, como la estrella en estos iconos.
El principio clave es garantizar que su icono sea legible a pequeña escala. Simplifica tanto como sea posible.
3. Exportar a SVG
Ahora, seleccione un icono y cópielo y péguelo en un nuevo documento cuadrado (por ejemplo, 200 × 200 píxeles). Escala el ícono para que encaje. Puede que le resulte útil establecer una regla de referencia. Coloree el ícono para que sea negro sólido sobre un fondo blanco.
Ahora, elige File… Save as y guarde el archivo como un archivo SVG. Use la configuración predeterminada de SVG. Una vez que haya hecho esto para todos los íconos, estará listo para crear una fuente web.
4. Importar a IcoMoon
Abre el Aplicación web IcoMoon . Para importar un icono, haga clic en el botón "Importar iconos" y luego seleccione los archivos SVG que desea agregar; puede agregar varios archivos a la vez. Aparecerán en "Tus iconos personalizados". Si están resaltados en amarillo, formarán parte de la fuente del icono que crearás. En este ejemplo, puede ver que he decidido no exportar uno de mis iconos, y agregué uno de los íconos de los "Mini iconos".
5. Exportar fuente desde IcoMoon
Puede hacer clic en el botón "Editar" si desea ajustar la posición, el tamaño o la rotación del icono. Use el botón "Guardar copia" para crear variaciones de iconos (por ejemplo, una imagen reflejada de un ícono). Agregue una etiqueta significativa al ícono, ya que se usará para generar el nombre de la clase.
Cuando esté listo, haga clic en el botón "Fuente" en la parte inferior de la pantalla para comenzar a generar la fuente. Aquí es donde puede asignar qué icono se asigna a qué personaje; por ejemplo, si el conjunto de iconos es de seis imágenes de una bola giratoria, podría asignar los caracteres q, w, e, r, t e y a los seis cuadros. En las preferencias, elija un nombre de fuente. También puede ajustar las métricas de la fuente, pero a menos que vaya a configurar su fuente personalizada junto con el texto estándar, realmente no necesita preocuparse por esto.
6. Descarga los archivos de fuente
Haga clic en "Descargar" para descargar el paquete de fuentes a su máquina. Será una subcarpeta que contiene las fuentes en sí (en formatos WOFF, EOT y TTF), así como una página HTML de muestra y el CSS correspondiente. Incluso hay un archivo JavaScript con una solución si necesita soportar IE 6 o 7.
Para agregar las fuentes a su proyecto, copie la subcarpeta de fuentes a su sitio. Puede copiar y pegar el CSS de style.css en el archivo CSS de su propio sitio, pero mi enfoque es cambiarle el nombre como fonts.css y mantenerlo como un archivo CSS separado. Luego debe agregar una referencia a este archivo CSS en su archivo HTML usando el enlace relativo:
<link rel="stylesheet" href="fonts.css" />En el elemento @ font-face del archivo CSS, deberá cambiar la referencia de URL a la nueva ubicación relativa de las fuentes, o simplemente puede soltar la carpeta de fuentes en su carpeta de hojas de estilo.
7. Llamar a la fuente
Como puede ver en el archivo de muestra index.html , hay dos formas de hacer referencia a la fuente personalizada, ya sea por su carácter (unicode o nombre) o por su nombre de clase. El primer ejemplo usa la condición de icono de datos HTML5
<div aria-hidden="true" data-icon="g"></div>Aquí, la clase fs1 se usa para establecer el tamaño de la fuente. La referencia oculta de aria ayuda a garantizar que el personaje no sea hablado por ningún lector de pantalla.
El segundo método usa un elemento span:
<span aria-hidden="true"></span>Este método es útil cuando quiere que el símbolo encaje en línea con el texto normal.
Si desea que el icono sea un enlace, puede envolverlo todo en un href :
8. Ideas avanzadas
Como acabamos de descubrir con el estado de desplazamiento, cambiar el color del icono es tan fácil como establecer la propiedad de color en nuestro CSS, y cambiar el tamaño es tan fácil como establecer la propiedad de tamaño de fuente. También puede configurar otras propiedades, como el sombreado de texto y la transparencia, a la vez que conserva la independencia de resolución de una fuente.
Pruébalo y te garantizo que nunca volverás a utilizar los iconos de mapas de bits.
¿Has probado el uso de fuentes para los iconos? ¿Cómo lo has encontrado? Háganos saber en los comentarios.