Saltar al contenido

Iconos en bootstrap 4

enero 15, 2022
Iconos en bootstrap 4

cómo utilizar los iconos de bootstrap

background-image: url(‘data:image/svg+xml,<svg class=»bi bi-bootstrap-fill» viewBox=»0 0 20 20″ fill=»%237952b3″ xmlns=»http://www.w3.org/2000/svg»><path fill-rule=»evenodd» d=»M6. 002 2a4 4 0 00-4 4v8a4 4 0 004 4h8a4 4 0 004-4V6a4 4 0 00-4h-8zm1.06 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832- .14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.543-2.11H7.063V14zm1.313-4.875V6.658h1.78c.974 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H8.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H8.375v2.725z» clip-rule=»evenodd»/></svg>’);

bootstrap fa icons

Bootstrap Icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. We recommend using a width: 1em (and optionally height: 1em) for easy resizing via font-size.

<svg xmlns=»http://www.w3.org/2000/svg» width=»32″ height=»32″ fill=»currentColor» class=»bi bi-chevron-right» viewBox=»0 0 16 16″><path fill-rule=»evenodd» d=»M4.646 1.646a.5 .5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z»/></svg>

Use the SVG sprite to insert any icon through the <use> element. Use the icon’s filename as the fragment identifier (e.g., toggles is #toggles). SVG sprites allow you to reference an external file similar to an <img> element, but with the power of currentColor for easy theming.

->  Dibujos de geometria analitica

Icon fonts with classes for every icon are also included for Bootstrap Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML (e.g., <i class=»bi-alarm-clock»></i>).

bootstrap-icons angular

Note: Remember to leave a space after the closing tag of icon element (i.e. after </i> tag), when using the icons along with the strings of text such as inside buttons or navigation links, to ensure that there is proper spacing between the icon and text.

You can also use external icon libraries in Bootstrap. One of the most popular and highly compatible external icon library for Bootstrap is Font Awesome. It provides over 675 icons which are available in SVG, PNG, as well as in web font format for better usability and scalability.

iconos de bootstrap 5

Aunque los Glyphicons se han eliminado en Bootstrap 4, todavía se pueden utilizar las otras opciones para conseguir este tipo de iconos. Se trata de la versión ascendente de Glyphicons, Octicons, Font Awesome, etc. Cuando utilizamos Bootstrap para el diseño de diseños responsivos para crear páginas web amigables para móviles y tabletas, se crean muchos problemas para los diseñadores. Uno de estos problemas es el uso de iconos. Cuando utilizamos iconos de imagen, existe el problema de la escala inadecuada como el tamaño de la ventana gráfica cambia y por lo tanto editar la imagen a diferentes tamaños según el tamaño de la ventana gráfica con la ayuda de un editor de imágenes. Las imágenes como icono requieren un tiempo de carga que retrasa la carga de la página web en varios dispositivos. Estos problemas pueden ser superados con el uso de fuentes de iconos. La mayoría de nosotros utilizamos Glyphicons en Bootstrap 3, que incluye alrededor de 260 glifos del conjunto Glyphicon Halflings, pero lamentablemente ya no está disponible para su uso en Bootstrap 4.

->  Que son las maquinas electricas

Las fuentes de iconos tienen las ventajas de la escalabilidad, la fácil manipulación del tamaño, el color y la forma (modificaciones de CSS) sobre el icono de la imagen donde requerimos Photoshop para cumplir con nuestra forma deseada del icono, el tamaño y el color. Font Awesome es un recurso muy esencial para conseguir fuentes de iconos mientras se trabaja con Bootstrap.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad