La nueva versión de los iconos de Bootstrap 5 agregará casi 300 iconos nuevos, haciendo que el número final resultante de iconos incluidos en la librería sobrepase los 1.000 iconos. Se añadirán nuevos iconos de calendario para utilizar a la hora de agregar eventos y rangos de fechas, también un amplio conjunto de nuevos íconos de teléfonos y de nuevos dispositivos e íconos dedicados a representar elementos de hardware, docenas de nuevas insignias y muchos elementos más.
Luego de las anteriores versiones de Boostrap 5 Alpha, no solamente se incluirán nuevos iconos, sino que también se incluirán docenas de correcciones y mejoras en los iconos de Bootstrap ya existentes.
Se han mejorado las rutas para reducir el tamaño de los archivos de iconos. Además, se ha actualizado la secuencia de comandos para el procesamiento de los iconos, lo que en futuras actualizaciones, permitirá crear íconos de varias dimensiones en vez de un único tamaño de 16×16 predeterminado.
Se ha gregado un nuevo sprite bootstrap-icons.svg. Para aquellos nuevos en los sprites SVG, un sprite te permite cargar un solo fragmento de forma activa desde una imagen, sin la necesidad de cargar todo el svg por completo.
¿Qué es sprite svg? Un sprite consiste básicamente en incluir varios gráficos diferentes dentro de una misma imagen, que a la hora de verse representada, hace que se muestre una única parte de la imagen a través de indicarlo de la forma adecuada a través de los elementos CSS e incluso Javascript.
Lo siguiente, es una muestra de cómo funcionarán los iconos de Bootstrap una vez importados:
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#shop"/>
</svg>
La característica más importante que llegará en la versión estable de los iconos de Bootstrap, serán las fuentes web de iconos. Si bien las fuentes de iconos son excelentes por varias razones a la hora de la implementación, debes de tener en cuenta de que no son la opción más accesible para los usuarios.
Los iconos cargados a través de archivos SVG proporcionan más opciones de estilos y control, y le permiten ser accesibles mediante roles aria y elementos de <title>.
Desde Bootstrap prometen seguir trabajando para mejorar la implementacion de los iconos cada vez e intentar minimizar el código necesario para el uso de los mismos.
Solamente nos queda, ¡Esperar a la versión de los iconos estables de Bootstrap!
? Prueba todos los Iconos de Bootstrap
? Código de los Iconos en Github
? Visita la Tienda de Ciberninjas ?
Relacionado
17 Nuevos Cursos Gratuitos de SQL, Python, Diseño Web y Más (06 de Marzo)
Regreso con nuevos cursos gratis, recuerda que algunos de los cupones de los cursos publicados ayer, es muy posible que aún sigan activos; y vas a poder encontrar cursos en español de javascript -typescript, react,vue- y Unity. Además, de cursos en inglés de Python, R, SQL y más; también tienes muchos cursos totalmente gratis y una gran oferta de guías para programación de O´Reilly (en inglés) ¡SEGUIR LEYENDO!
21 Nuevos Cursos Gratuitos: Python, Google Cloud, CSS y Más (25 de Febrero 2021)
Como de costumbre, vamos con los cursos gratis, tenemos 3 cursos en español: Computación, Google Cloud y aplicaciones web; y 18 cursos gratuitos en inglés: Python, Flask, Ionic, PHP, Android, Github, CSS, Flexbox, Illustrator, Photoshop, Scrum y minado de Sugar. Recuerda, que puedes si quieres, puedes acceder a las Mejores Ofertas de Udemy ¡Alé, aprendamos gratis un ratico! Cursos en Español Computación ? Curso Gratuito de ¡SEGUIR LEYENDO!
40 Cursos Gratis de Udemy: Desarrollo Web, Python (cupón finalizado)
Recién llega la primavera y vamos con una publicación más, que incluye los cursos del Lunes; hoy tenemos, 9 cursos en español (Typescript, Javascript, React, Vue, Firebase, Swift, Azure, HTML y CSS, Power Bi). Más 31 cursos en inglés: Javascript, Typescript, React, Python, R, Java, Drupal, Android y Kotlin, Básicos de Visual Studio Code, Bootstrap, Gitlab, Maya 3D, Photoshop, Marketing en Facebook e Instagram, SEO. Iniciación ¡SEGUIR LEYENDO!
5 Extensiones de Chrome capaces de aumentar tu productividad como desarrollador
Como desarrollador de software, es importante poder aumentar la productividad para terminar las tareas más difíciles a su debido tiempo. Para optimizar los procesos, se requieren las mejores herramientas y tecnologías, entre ellas algunas de las mejores extensiones de Chrome. Aprender a programar es una de las tareas más difíciles y que consume más tiempo en los nuevos programadores. Una vez que hayas aprendido a programar ¡SEGUIR LEYENDO!
85 Geniales Recursos CSS Gratuitos
La lista de las siguientes geniales herramientas de CSS, se basa en el hilo de Twitter de @Prathkum. El listado se separa en herramientas de color, selectores de color integrados, fragmentos de código, documentos y notas, generadores de CSS, sitios de inspiración, repositorios de GitHub, validadores de CSS y más. ? Colección Recursos CSS / ? Cursos Gratis de CSS / ? Libros Gratis de CSS ¡SEGUIR LEYENDO!
¿Cómo alinear a la derecha en Bootstrap 4?
Bootstrap es un framework CSS que se utiliza para diseñar y personalizar sitios adaptables para dispositivos móviles. En Bootstrap 4, la alineación de elementos a la derecha se puede lograr usando cualquiera de las siguientes clases: Agregando la clase float-right La clase .float-right en Bootstrap usa la propiedad float CSS para colocar un elemento a la derecha. Debes tener en cuenta que el contenedor Bootstrap 4 ¡SEGUIR LEYENDO!