La forma más sencilla de incluir iconos de Bootstrap en una página web es mediante el enlace CDN. Este enlace CDN básicamente apunta a un archivo CSS remoto que incluye todas las clases necesarias para generar iconos de fuentes.
Puede incluir iconos de Bootstrap en una plantilla de Bootstrap, así como en una página web simple sin usar el marco de Bootstrap. Echemos un vistazo al siguiente ejemplo:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
Para usar íconos de Bootstrap en su código, necesitará una etiqueta con una clase .bi-* de
ícono individual aplicada. La sintaxis general para usar iconos de Bootstrap es:
<i class="bi -class-name "></i> |
Donde class-name es el nombre de la clase de icono en particular, por ejemplo search, person, calendar, star, , globe, facebook, twitter, etc. Vea la lista de todas las clases de iconos de Bootstrap .
Por ejemplo, para colocar el ícono de búsqueda dentro de un botón, podría hacer algo como esto:
<button type="submit" class="btn btn-primary">
<span class="bi-search"></span> Search</button>
<button type="submit" class="btn btn-secondary">
<span class="bi-search"></span> Search</button>
— El resultado del ejemplo anterior se verá así:
Del mismo modo, puede colocar iconos dentro de los navegadores, formularios, tablas, párrafos o en cualquier lugar que desee. En el próximo capítulo, verá cómo utilizar estos iconos en los componentes de navegación de Bootstrap .
Nota: Recuerde dejar un espacio después de la etiqueta de cierre del elemento del ícono (es decir, después de la etiqueta), cuando use los íconos junto con las cadenas de texto, como botones internos o enlaces de navegación, para asegurarse de que haya un espacio adecuado entre el ícono y el texto.
También puede utilizar bibliotecas de iconos externos en Bootstrap. Una de las bibliotecas de iconos externos más populares y altamente compatibles para Bootstrap es Font Awesome. Proporciona más de 675 íconos que están disponibles en SVG, PNG, así como en formato de fuente web para una mejor usabilidad y escalabilidad.
Simplemente puede usar el enlace CDN de font-awesome disponible gratuitamente para incluirlo en su proyecto. Echemos un vistazo al siguiente ejemplo para entender cómo funciona básicamente:
Hello, world! |
|
Para usar íconos de Font Awesome en su código, necesitará una etiqueta junto con una clase base .fay una clase de ícono individual .fa-*. La sintaxis general para usar íconos de fuentes increíbles es:
<i class="fa fa- nombre-clase "></i>
Donde class-name es el nombre de la clase de icono en particular, por ejemplo search, user, calendar, star, , globe, facebook, twitter, etc. Vea la lista de todas las clases de iconos de Font Awesome.
Por ejemplo, puede colocar un icono de búsqueda de fuente impresionante dentro de un botón como este:
<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Search</button>
— El resultado del ejemplo anterior se verá así:
Del mismo modo, puede colocar íconos de Font Awesome dentro de los navegadores, formularios, tablas, párrafos y otros componentes de la misma manera que lo hace con los íconos de Bootstrap.