Krypton Solid

Cómo convertir sus iconos en una fuente web

Cómo convertir sus iconos en una fuente web

Había creado algunos iconos para el rediseño de un sitio web que estaba haciendo, y obtuve una vista previa del nuevo sitio en un iPad antiguo. El diseño se veía bien en tamaño normal, pero al acercarme a una parte de la página, de repente vi que mi ícono estaba borroso, mientras que el encabezado basado en texto todavía era nítido y nítido. En un iPad con pantalla Retina más nuevo, los iconos no se veían muy nítidos, incluso en tamaño normal.

La primera idea que tuve fue crear imágenes de sprites de doble tamaño, configurándolas para que se mostraran a la mitad de su tamaño usando CSS. Si bien esto hizo que se vieran mejor en una pantalla Retina en tamaño normal, tan pronto como comenzaste a pellizcar y hacer zoom, la borrosidad regresó. Pero el texto seguía siendo tan nítido 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 fuentes generados y CSS en una página web.

Las ventajas de usar una fuente de iconos

Una fuente de iconos tiene varias ventajas sobre las imágenes de mapa de bits, además de la nitidez de la imagen.

  • Idoneidad: una fuente de icono tendrá un tamaño de archivo mucho más pequeño que una serie de imágenes, especialmente si ha utilizado imágenes de doble tamaño para pantallas Retina. Y una vez que se haya cargado la fuente, sus íconos se renderizarán instantáneamente, sin necesidad de descargar una imagen.
  • Escalabilidad: una fuente de icono se puede establecer en cualquier tamaño estableciendo la propiedad font-size en el CSS adjunto. Esto le permite experimentar con diferentes tamaños; mientras que, para imágenes de mapa de bits, tendría que generar un archivo de imagen en cada tamaño.
  • Flexibilidad: Los efectos de texto se pueden aplicar fácilmente a su icono, incluidos colores, sombras paralelas y estados de rollover. También se mostrarán bien contra cualquier color o imagen de fondo.
  • Compatibilidad: Las fuentes web son compatibles con todos los navegadores modernos y también con los navegadores heredados, incluso IE 6 y versiones anteriores.

¡Entonces empecemos!

Crear una fuente de iconos

Las fuentes de símbolos se pueden crear utilizando una aplicación de creación de fuentes dedicada, como Glifos, pero una herramienta de tipografía profesional va más allá de las necesidades o requisitos de crear una fuente de iconos simple, en la que la relación entre los caracteres (es decir, el kerning y las ligaduras) no es importante.

De lejos, la forma más fácil es utilizar una gran aplicación en línea gratuita llamada IcoMoon, de Keyamoon, que elimina toda la molestia 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 iconos. 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 usar de forma gratuita (consulte la licencia). Si está buscando íconos bastante estándar, como «descarga de archivos» y «carrito de compras», entonces puede encontrar que usar uno de estos es preferible a crear uno propio.

Paso a paso

1. Prepara tus ilustraciones

Para empezar, debe crear los iconos en un programa de dibujo vectorial que sea capaz de exportar a 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 sea aproximadamente del mismo tamaño. Tener un icono mucho más alto o más largo que otro dificultará la creación de una fuente coherente. Aquí, tuve que reducir el ancho del ícono de mi dirigible para que coincida con los demás.

2. Limpiar

Verifique cada ícono cuidadosamente para asegurarse de que no tenga imperfecciones; los detalles que se ven bien en tamaños más pequeños pueden ocultar pequeños defectos cuando se amplía. En el ícono que se muestra a continuación, necesito eliminar los escalones irregulares que se han deslizado al colocar elementos en capas.

En Illustrator, use la herramienta Buscatrazos para unir elementos superpuestos y el elemento Menos Frente para eliminar elementos recortados, como la estrella en estos íconos.

El principio clave es asegurarse de que su icono sea legible a pequeña escala. Simplifique tanto como sea posible.

3. Exportar a SVG

Ahora, seleccione un icono, cópielo y péguelo en un nuevo documento cuadrado (por ejemplo, 200 × 200 píxeles). Escale el icono para que encaje. Puede resultarle útil establecer una regla de referencia. Colorea el icono de modo que sea negro sólido sobre un fondo blanco.

Ahora, elija Archivo… Guardar como y guarde el archivo como un archivo SVG. Utilice la configuración SVG predeterminada. 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. A continuación, aparecerán en «Sus iconos personalizados». Si están resaltados en amarillo, serán parte de la fuente de iconos que creará. En este ejemplo, puede ver que decidí no exportar uno de mis propios íconos y agregué uno de los íconos de los «Mini-íconos».

5. Exportar fuente de IcoMoon

Puede hacer clic en el botón «Editar» si desea ajustar la posición, el tamaño o la rotación del icono. Utilice el botón «Guardar copia» para crear variaciones de iconos (por ejemplo, una imagen reflejada de un icono). Agregue una etiqueta significativa al icono, ya que se utilizará 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 su conjunto de iconos son seis imágenes de una bola giratoria, puede asignar los caracteres q, w, e, r, t y y a los seis fotogramas. 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 fuentes

Haga clic en «Descargar» para descargar el paquete de fuentes a su máquina. Será una subcarpeta que contendrá las propias fuentes (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 alternativa si necesita admitir 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 desde style.css en el archivo CSS de su propio sitio, pero mi enfoque es cambiarle el nombre como fonts.css y guárdelo como un archivo CSS separado. Luego, debe agregar una referencia a este archivo CSS en su archivo HTML utilizando el enlace relativo:

<em><</em>link rel="stylesheet" href="https://www.webdesignerdepot.com/2013/04/how-to-turn-your-icons-into-a-web-font/fonts.css" />

En el @Perfil delantero elemento del archivo CSS, deberá cambiar la referencia URL a la nueva ubicación relativa de las fuentes, o simplemente puede colocar la carpeta de fuentes en la carpeta de la hoja de estilo.

7. Llamar a la fuente

Como puede ver en la muestra index.html archivo, 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 HTML5 icono de datos condición

<em><</em>div aria-hidden="true" data-icon="&#x67;"><em><</em>/div<em>></em>

Aquí el fs1 La clase se usa para establecer el tamaño de la fuente. La aria oculta La referencia ayuda a garantizar que ningún lector de pantalla hable el personaje.

El segundo método usa un elemento span:

<em><</em>span aria-hidden="true"<em>><</em>/span>

Este método es útil cuando desea que el símbolo se alinee con el texto normal.

Si desea que el icono sea un enlace, puede envolverlo todo en un href:

<a href="https://www.webdesignerdepot.com/2013/04/how-to-turn-your-icons-into-a-web-font/<a href="http://www.yoursite.com/">http://www.yoursite.com</a>" target="blank" data-icon="&#x73;"></a>

Aquí, he agregado el enlace de icono class y darle un estado flotante:

a.iconlink {
  font-family: 'youriconfont';
  text-decoration:none;
  color: #666666;
}
a.iconlink:hover {
  text-decoration:none;
  color: #999999;
}

8. Ideas avanzadas

Como acabamos de descubrir con el estado de desplazamiento, cambiar el color del icono es tan fácil como configurar la propiedad de color en nuestro CSS, y cambiar el tamaño es tan fácil como configurar la propiedad de tamaño de fuente. También puede establecer otras propiedades, como la sombra y la transparencia del texto, todo ello manteniendo la independencia de resolución de una fuente.

Pruébelo y le garantizo que nunca volverá a utilizar iconos de mapa de bits.

¿Ha intentado utilizar fuentes para iconos? ¿Cómo lo has encontrado? Háznoslo saber en los comentarios.

Deja un comentario