Hoy, continuamos con nuestra misión de crear la fuente de íconos más hermosa y robusta en la web, ¡gratis!
En agosto, lanzamos Elegant Icon Font , con 310 hermosos íconos empaquetados convenientemente en un solo archivo de fuente. Esta fuente de íconos nos brinda una manera de mostrar hermosos gráficos basados en vectores en nuestros diseños, pero también se pueden usar para muchos otros propósitos, ¡por eso los pusimos a disposición para su descarga de forma gratuita! También los licenciamos bajo la GPL 2.0, lo que significa que son completamente de código abierto y sin restricciones. Hoy, agregamos 50 más a ese conjunto con una actualización de temática empresarial. Estos son píxeles perfectos en tamaños de fuente que son múltiplos de 16px, pero se pueden usar en cualquier tamaño deseado. Descargue el conjunto completo de iconos 360 aquí .
Cómo usar la fuente en su sitio web
Hubo muchas preguntas sobre cómo incrustar una fuente en un sitio web. Hemos creado un breve tutorial a continuación que debería aclarar un poco las cosas.
Lo primero que debe hacer es incrustar la fuente usando CSS. Puede hacer esto editando el archivo CSS de su sitio web, o si está utilizando un tema elegante, puede pegar el CSS relevante en el panel «CSS personalizado» en ePanel. Dentro de su Tablero de WordPress, ubique el menú de opciones de su tema en la pestaña Apariencias y luego busque el cuadro «CSS personalizado». Pegue el código a continuación en el cuadro y haga clic en guardar. Si no está usando un tema elegante, puede usar Apariencias > Editor para agregar el código al archivo style.css de su tema, o puede crear un tema secundario . Nota: Al editar su tema, es una gran idea crear un tema secundarioen lugar de editar el archivo original del tema; de lo contrario, deberá realizar los cambios nuevamente cada vez que actualice su tema.
@Perfil delantero {
familia de fuentes: ‘ElegantIcons’;
src:url(‘/fuentes/ElegantIcons.eot’);
src:url(‘/fuentes/ElegantIcons.eot?#iefix’) format(‘embedded-opentype’),
url(‘/fonts/ElegantIcons.woff’) format(‘woff’),
url(‘/fonts/ElegantIcons .ttf’) format(‘truetype’),
url(‘/fonts/ElegantIcons.svg#ElegantIcons’) format(‘svg’);
peso de fuente: normal;
estilo de fuente: normal;
}
[icono de datos]:antes de {
familia de fuentes: ‘ElegantIcons’;
contenido: attr(icono de datos);
hablar: ninguno;
peso de fuente: normal;
variante de fuente: normal;
transformación de texto: ninguno;
altura de línea: 1;
-webkit-font-smoothing: suavizado;
-moz-osx-font-smoothing: escala de grises;
}
También encontrará una carpeta llamada ‘ fuentes ‘ en el paquete de iconos. Mueva esta carpeta al directorio base de su sitio web, de modo que esté ubicado en www.yourwebsite.com/fonts. Puede usar FTP para cargar la carpeta en su sitio web.
Después de hacer esto, puede dar a cualquier elemento html el atributo de icono de datos con un valor del icono que le gustaría usar. La lista completa de iconos y sus valores Unicode se encuentran en la página de descarga de fuentes de iconos . Por ejemplo, si quisiera usar el icono «Flecha arriba», podría crear un lapso con el valor del icono de datos de «!» y luego ajuste el tamaño y el color del objeto en consecuencia.
<span data-icon="!"></span>
¡Y eso es! Si todo sale bien, habrá integrado con éxito ElegantIcons en su sitio web.
Para algunas formas más de implementación y una descripción más detallada de cómo incrustar esta fuente, Chris Ferdinandi tiene una excelente documentación sobre el tema.