Hay tres maneras de incluir Uicons en tu proyecto web: puedes insertarlos a través de nuestra CDN, puedes descargarlos y obtener el paquete de iconos completo en todos los formatos disponibles (SVG, CSS, archivo de fuentes y ejemplo HTML) o puedes instalarlos a través del gestor de paquetes npm.
Instala la última versión de Uicons -que incluye cada icono individual en formato SVG, hojas de estilo CSS y archivos de fuentes- y mantén fácilmente tu proyecto actualizado con los últimos iconos y mejoras a través del gestor de paquetes npm.
El archivo /css/uicons-[your-style].css contiene el estilo principal y todos los estilos de iconos que necesitarás al utilizar UIcons. La carpeta /webfonts contiene todos los archivos tipográficos a los que hace referencia el CSS anterior y de los que depende.
Copia este enlace y pégalo donde sea visible, cerca de donde estés usando el recurso. Si no es posible, colócalo en el pie de página de tu sitio web, blog o boletín informativo, o en la sección de créditos.
El uso de iconos en el diseño web es un método probado para modernizar un sitio web y ayudar a dirigir el flujo de usuarios. La adición de iconos al contenido de su sitio web ayuda al usuario a procesar mejor la información que usted está tratando de transmitir y proporciona un punto de enfoque visual que se basa un usuario a una sección específica.
Los iconos gráficos se pueden utilizar de muchas maneras para animar su proyecto de diseño web. Puedes utilizarlos como acompañamiento visual de áreas de texto o como enlaces independientes en situaciones en las que el espacio es reducido y los bloques de texto no son factibles dentro del diseño. Es esta versatilidad de los iconos la que los hace tan útiles y extendidos.
Afortunadamente, no hace falta que te pongas a crear tu propio conjunto de iconos. Font Awesome proporciona un marco versátil que incorpora casi cualquier gráfico de icono que puedas imaginar junto con la escalabilidad y las capacidades de personalización necesarias. Font Awesome le ahorrará casi con seguridad tiempo y dinero en su aplicación de iconos específicos. El siguiente artículo le guiará a través de la incorporación de los iconos de Font Awesome para optimizar su proyecto de diseño web.
En la historia de la web, los diseñadores han probado diversos métodos para utilizar iconos e imágenes en los sitios web. Esto incluye, por nombrar algunos: Importar archivos de imágenes 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 terminado (afortunadamente). En los últimos años, el uso de fuentes no estándar se ha convertido en un estándar en el desarrollo web, lo que ha llevado al auge de las fuentes de iconos.
Para ser claros, hay algunas desventajas. Debido a las diferencias entre los navegadores, la representación y el suavizado de las fuentes pueden ser poco fiables. Otra desventaja, que también está relacionada con la representación inconsistente, es el posicionamiento. Posicionar un pequeño icono 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. Desafortunadamente, no hay una buena alternativa hasta que la fuente del icono se haya cargado por completo, lo que hace inevitable cargar los activos antes de renderizar el contenido de la parte superior de la página (lo que tiene un impacto en los resultados de la velocidad de la página). Hay mucha información en profundidad sobre los casos de uso de las fuentes de iconos, incluyendo el artículo de Ian Feather, CSS-tricks, SitePoint y Ben Frain.
Nota: Recuerde dejar un espacio después de la etiqueta de cierre del elemento icono (es decir, después de la etiqueta </i>), cuando se utilizan los iconos junto con las cadenas de texto como dentro de los botones o enlaces de navegación, para asegurarse de que hay un espacio adecuado entre el icono y el texto.
También puedes utilizar bibliotecas de iconos externas en Bootstrap. Una de las bibliotecas de iconos externas más populares y altamente compatibles con Bootstrap es Font Awesome. Proporciona más de 675 iconos que están disponibles en SVG, PNG, así como en formato de fuente web para una mejor usabilidad y escalabilidad.