En este artículo veremos cómo insertar un icono de búsqueda en Bootstrap . Si bien Bootstrap no incluye un conjunto de iconos de forma predeterminada, tienen su propia biblioteca de iconos integral llamada Iconos de Bootstrap. Siéntase libre de usarlos o cualquier otro conjunto de iconos en su proyecto. Hay varias formas de agregar un ícono de búsqueda u otros íconos a su página HTML. Todos los iconos de las bibliotecas de iconos se pueden personalizar con CSS (tamaño, alineación, rotación, sombra, color, etc.).
Método 1: usar Glyphicons de arranque: Bootstrap nos brinda varios íconos predefinidos, incluidos los íconos de búsqueda. Puede agregar varios tipos de íconos desde https://glyphicons.com/.
Guía paso a paso para la implementación:
Paso 1: Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js” ></guión>
Paso 2: agregue la etiqueta <div> en el cuerpo HTML con el contenedor de clase.
Paso 3: ahora agregue cualquier ícono que desee usando la siguiente sintaxis, donde el nombre es el nombre de glyphicon.
<span class="glyphicon glyphicon-name"></span>
Ejemplo: El siguiente ejemplo muestra diferentes tipos de glyphicons y su uso.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <h2 style="color:green">Glyphicons Examples</h2> <p>Camera icon: <span class="glyphicon glyphicon-camera"></span> </p> <p>Search icon:<span class="glyphicon glyphicon-search"></span></p> <p>Search icon on a button: <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Bell icon: <span class="glyphicon glyphicon-bell"></span> </p> </div> </body> </html>
Producción:
Todos los glifos
Método 2 Usar íconos impresionantes de fuentes: Font Awesome es una fuente web que contiene todos los íconos del marco Twitter Bootstrap. Font Awesome es un conjunto de iconos ampliamente utilizado que le brinda imágenes vectoriales escalables que se pueden personalizar con CSS.
Guía paso a paso para la implementación:
Paso 1: Copie el código de su kit en el <head> de cada plantilla o página de su proyecto donde desee usar Font Awesome a través del kit. Si ya tiene otras versiones o versiones de Font Awesome en uso, asegúrese de eliminarlas.
<secuencia de comandos src=”https://kit.fontawesome.com/6ec9c7cfba.js” crossorigin=”anónimo”></secuencia de comandos>
Paso 2: agregue cualquier ícono gratuito a un proyecto con una línea de código.
Sintaxis:
<i class="fas fa-camera"></i> <i class="fas fa-camera"></i> <span class="fas fa-camera"></span>
Ejemplo: El siguiente ejemplo muestra diferentes tipos de íconos de fuente impresionante, incluido el ícono de búsqueda y su uso.
HTML
<!DOCTYPE> <html> <head> <script src= "https://kit.fontawesome.com/6ec9c7cfba.js" crossorigin="anonymous"> </script> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <i class="fas fa-chess" style="font-size:32px;"></i> <i class="fas fa-biking" style="font-size:42px;"></i> <i class="fas fa-bacteria" style="font-size:52px;"></i> <i class="fa fa-car" style="font-size:62px;"></i> <p style="color:green">Search icon <i class="fas fa-search" style="font-size:72px;"></i> </p> </body> </html>
Producción:
Icono de búsqueda
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA