Fuente impresionante enlace
Contenidos
En la historia de la web, los diseñadores han probado diversos métodos para utilizar iconos e imágenes en los sitios web. Por nombrar algunos: Importar archivos de imagen de mapa de bits (normalmente PNG transparentes), vectorizar archivos SVG o incluso utilizar fuentes web que contengan símbolos en lugar de los típicos caracteres del alfabeto.
La época oscura, en la que los diseñadores web sólo podían elegir entre un puñado de fuentes diferentes, ha pasado (afortunadamente) a la historia. En los últimos años, el uso de fuentes no estándar se ha convertido en la norma del desarrollo web, lo que ha propiciado el auge de las fuentes de iconos.
Para ser claros, hay algunas desventajas. Debido a las diferencias entre navegadores, la renderización y el suavizado de las fuentes pueden ser poco fiables. Otra desventaja, también relacionada con la inconsistencia de la representación, es el posicionamiento. Posicionar un icono diminuto en el centro de un círculo para que se vea igual en todos los navegadores puede ser doloroso y hay que evitar superponer varios glifos. Desgraciadamente, no existe un buen método alternativo hasta que la fuente del icono se ha cargado por completo, lo que hace inevitable cargar los activos antes de renderizar el contenido de la mitad superior de la página (lo que repercute en los resultados de Page Speed). Hay mucha información en profundidad sobre los casos de uso de las fuentes de iconos, incluido el artículo de Ian Feather, CSS-tricks, SitePoint y Ben Frain.
¿Puedo añadir iconos a Font Awesome?
Puedes subir tantos iconos como te permita tu plan (en uno o en varios Kits). Los iconos subidos pueden tener el mismo nombre que los iconos oficiales de Font Awesome (el prefijo único los diferenciará).
¿Cómo insertar iconos en HTML?
Para insertar un icono, añada el nombre de la clase de icono a cualquier elemento HTML en línea. Los elementos <i> y <span> son muy utilizados para añadir iconos. Todos los iconos de las siguientes bibliotecas de iconos son iconos vectoriales escalables que pueden personalizarse con CSS (tamaño, color, sombra, etc.).
¿Sigue siendo gratuito Font Awesome?
Siempre libre
Desde el principio, Font Awesome ha sido gratuito y de código abierto. Y como somos propiedad de creadores y operados por ellos, nos aseguramos de que Font Awesome Free siga siéndolo.
Cómo utilizar los iconos de font awesome
Básicamente, se puede llamar “fuente web” a cualquier archivo .ttf, .woff2 o de cualquier otro tipo que esté alojado en un servidor y sea utilizado por cualquier sitio web. Permiten a los diseñadores y desarrolladores aprovechar una amplia gama de tipografías interesantes simplemente enlazando a los archivos de fuentes.
El proceso es bastante sencillo, pero puede resultar muy confuso si estás empezando. He aquí una rápida sinopsis: Empiezas por crear tu propio conjunto de iconos como SVGs utilizando tu software de edición vectorial favorito, y luego importas tus SVGs a la codiciada aplicación Icomoon. Incluso te mostraré un par de maneras diferentes. Empecemos.
Los SVG exportados deben estar en sus propios archivos separados. Para prepararnos para esto, haz tantas mesas de trabajo separadas para cada icono que creas que necesitarías (puedes añadir o eliminar iconos fácilmente más adelante, así que no te preocupes por no conseguir el número exacto). Estamos utilizando Adobe Illustrator para este tutorial en particular, ¡pero cualquier software de edición basado en vectores funcionaría!
Esto es muy importante: cuando crees tu propio conjunto de iconos, asegúrate de convertir todos los trazos en formas sólidas, como se muestra en el gif anterior. Además, limpia tus líneas tanto como sea posible. Los puntos sueltos o innecesarios pueden causar fallos al mostrar o exportar tus fuentes web.
Fuente awesome cdn
⚠️ Este artículo está obsoleto: Primero pasé a un flujo de trabajo Gulp personalizado, luego durante un tiempo usé símbolos SVG y referencias externas con un polyfill. Ahora utilizo componentes React SVG en línea, y ocasionalmente archivos .svg en etiquetas img.
Gestiona todos los iconos de fuentes de tu proyecto en una carpeta como archivos SVG bien nombrados. Añade iconos a esta carpeta para tener tus fuentes mágicamente reconstruidas y tu Sass automáticamente configurado para que empieces a usar los iconos a través de sus bonitos nombres; sin tocar tu markup o lidiar con nombres de clase no semánticos.
La aplicación web de IcoMoon es la forma más cómoda de obtener nuevos iconos. Busca entre una gran variedad de colecciones, selecciona las que te gusten y haz clic en el botón de descarga SVG. Esto te dará un bonito zip de archivos SVG listos para que los coloques en tu proyecto.
Debes ejecutar Font Custom cada vez que actualices tus iconos. En Terminal, navega a la carpeta /fontcustom y ejecuta fontcustom compile. Si usted está haciendo un montón de trabajo en sus iconos utilizar fontcustom reloj en lugar de recompilar automáticamente cada vez que se detecta un cambio dentro de la carpeta / fontcustom. reloj parece ser un poco roto en estos días, por lo que tienden a no utilizarlo mucho.
Fuente impresionante enlace rel
Icon fonts contain symbols or pictograms instead of letters and numbers. These pictograms can be easily added to website content and resized using CSS. Compared to image based icons, font icons are much faster which helps with your overall WordPress website speed.
Icon fonts can be used to display commonly used icons. For example, you can use them with your shopping cart, download buttons, feature boxes, giveaway contest, and even in WordPress navigation menus.
If you are a beginner level user just trying to add some icons to your posts or pages, then this method is suitable for you. You wouldn’t have to modify theme files, and you would be able to use icon fonts everywhere on your website.
You can also combine different icons together and style them at once. For example, lets say you want to display a list of links with icons next to them. You can wrap them under a <div> element with a specific class.
We hope this article helped you learn how to easily add icon fonts in your WordPress theme. You may also want to take a look at our tutorial on how to add image icons with navigation menus in WordPress.