Podemos agregar íconos en los botones de muchas maneras, pero lo intentaremos en HTML puro .
Tenemos que usar enlaces de fuentes externas para los íconos. La aplicación de iconos en el botón hace que el usuario comprenda fácilmente la funcionalidad de ese botón.
El ícono de Font Awesome en su formulario es una idea innovadora que llamará la atención sobre su sitio web. Es tan simple como aplicar el icono de Font Awesome en cualquier botón. La etiqueta <i> y la etiqueta <span> se usan ampliamente para agregar íconos en las páginas web. Para agregar cualquier ícono en las páginas web, necesita el enlace de font-awesome dentro de la sección de encabezado. El ícono de font-awesome se puede colocar usando el prefijo fa antes del nombre del ícono.
Enlace CDN:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
Ejemplo: En este ejemplo, tomaremos un formulario donde el botón es necesario. Después de eso, colocaremos el icono de font-awesome dentro del botón . Usaremos el enlace CDN para usar los íconos de fuente impresionante. Después del botón, colocaremos nuestro icono.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Add icon library -->
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
h1 {
color: green;
}
.btn {
background-color: light-green;
padding: 12px 16px;
font-size: 16px;
}
.btn:hover {
background-color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>How to add icons in the button in HTML?</h2>
<button class="btn">
<i class="fa fa-bolt"></i>
</button>
<button class="btn">
<i class="fa fa-fire"></i>
</button>
<button class="btn">
<i class="fa fa-tree"></i>
</button>
<button class="btn">
<i class="fa fa-trash"></i>
</button>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA