Bootstrap-icons

<< Componentes

Podemos incorporar a nuestros diseños los iconos que vienen predefinidos en Bootstrap, para ello tenemos la posibilidad de utilizarlos de dos formas:

1. Librebría bootstrap-icons

Si nos instalamos la librería de bootstrap-icons

npm i bootstrap-icons

Y añadimos el link:css a nuestro html

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="sass/custom.scss" />
  <link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ejemplo Bootstrap-icons</title>
</head>

<body>

  <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Podemos pasar a usar sus iconos en nuestro código. Ejemplo:

<i class="bi bi-0-circle"></i>

2. Imagen SVG

Lo que haremos es incorporar a nuestro HTML el SVG que nos facilita la web de bootstrap

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle" viewBox="0 0 16 16">
  <path d="M7.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99M8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895"/>
  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8"/>
</svg>

<< Componentes