Nos hemos propuesto crear la fuente de iconos más hermosa, elegante y completa de la web… ¡gratis! Hemos estado luchando para encontrar la mejor fuente de iconos para usar en nuestros propios proyectos, así que decidimos crear la nuestra propia. Esta fuente se utilizará en nuestros temas y continuaremos actualizando la colección para satisfacer las necesidades de nuestros diseños. A diferencia de los gráficos tradicionales, estos íconos están alojados dentro de un archivo de fuente, lo que significa que están basados en vectores y pueden expandirse y contraerse sin degradación de la calidad. El resultado son gráficos hermosos y nítidos en cualquier pantalla (incluidas las pantallas Retina). Además, estos iconos se han optimizado con detalles de píxeles perfectos para 16 píxeles y todos los múltiplos de 16 píxeles (32 píxeles, 64 píxeles, etc.). Estos íconos tienen licencia dual bajo GPL 2.0 y MIT, y son de uso completamente gratuito.
Suscríbete a nuestro canal de Youtube
Descargar los iconos
Por qué las fuentes de iconos son increíbles
Las fuentes de iconos son excelentes porque son flexibles y se cargan rápidamente. Usando una sola fuente y CSS, puede crear innumerables variaciones gráficas que normalmente requerirían el uso de una colección igualmente innumerable de imágenes voluminosas y no escalables. ¡Combinados con elementos HTML, estos íconos pueden incluso convertirse en hermosos botones como el enlace de descarga de arriba!
Cómo utilizar la fuente de iconos elegante en su sitio web
Usar la fuente Elegant Icon en su sitio es fácil, especialmente si es miembro de Elegant Themes . Sin embargo, primero deberá cargar uno de los archivos de fuente del enlace de descarga anterior en Divi Builder. Luego, puede elegir los íconos desde la pestaña Diseño de la mayoría de los módulos Divi, o puede usar el Unicode en su texto para insertarlo de la misma manera que lo haría con un ampersand o un espacio en blanco. Si no es un usuario de Divi, tenemos un tutorial sobre cómo usar cualquier fuente que desee en su sitio web sin un complemento que lo configurará todo.
Subir la fuente del icono elegante al Divi Builder
En primer lugar, descargue el archivo .ZIP que vinculamos anteriormente y descomprímalo en su computadora. Luego, busque la carpeta elegant_font y navegue hasta HTML CSS -> Fonts . Dentro de esa carpeta, encontrará los diversos archivos de fuentes que puede usar.
Después de eso, siga estos pasos para cargar la fuente en Divi Builder.
- Navegue a la sección de encabezado o texto de cualquier módulo en la pestaña Diseño.
- Haga clic en el menú desplegable Fuente de texto (o Fuente de encabezado)
- Presione el botón Cargar para que aparezca el modo de carga
- Seleccione cualquiera de los archivos de fuentes del archivo ZIP que descargó
- Presiona el botón azul Subir
Verá la fuente en la pestaña Diseño ahora. Debido a que es una fuente real, los caracteres corresponden a varios botones del teclado, razón por la cual el nombre de la fuente que se ingresó como Fuente de icono elegante se compone de varios iconos en la ventana del generador.
Y con eso, se carga su nueva fuente Elegant Icon. Si no desea pasar por el constructor, siempre puede seguir nuestro tutorial para agregarlos a su sitio de otra manera.
Uso de la fuente de iconos elegante
Una vez que haya cargado la fuente en su sitio, puede establecer la fuente en cualquier encabezado o estilo de texto que desee. Siempre que la pestaña Diseño tenga el conjunto de fuentes de iconos elegantes, puede usar el teclado o los caracteres Unicode que se enumeran a continuación para mostrar la fuente que desee. Recuerde que puede personalizar el tamaño de cada encabezado, por lo que puede mantener H6 en reserva para la fuente de icono elegante y sacarlo cuando sea necesario. Aquí hay un ejemplo de dos módulos de texto con el mismo texto, solo uno tiene la fuente establecida en el valor predeterminado del sitio y el otro es la fuente Elegant Icon.
Y debido a que es una fuente, recuerda que puedes aumentar o reducir el tamaño del ícono para que se adapte a tus necesidades sin pérdida de calidad.
Guía de referencia de conjuntos completos y Unicode
A continuación, hemos enumerado una guía de referencia completa para la fuente de iconos elegante, incluidas las clases de CSS para la inclusión y el estilo individuales y Unicode para usar los iconos en línea mientras trabaja. Para obtener una visión más detallada de cómo usar fuentes de íconos en WordPress, Divi e incluso aplicaciones fuera de línea, consulte nuestra guía completa .