Los botones son uno de los elementos de interfaz de usuario más comunes. Hicieron posible que los usuarios interactúen con un sistema y tomen medidas al hacer selecciones. Para que los botones sean más fáciles de usar, podemos poner iconos en los botones. Pure CSS no viene con los íconos, hay tantos paquetes de íconos disponibles que se pueden usar en Pure CSS. En este artículo, utilizaremos el icono de fuente impresionante. Para incluir íconos en un botón, use un elemento <i> dentro de una clase de botón puro en el elemento del botón.
Clases de íconos de botones de CSS puro: no hay una clase predefinida para íconos, puede colocar el ícono de fuente impresionante entre los elementos de botón como solíamos poner en html normal
Íconos de Font Awesome: Font-awesome es una biblioteca de íconos web que le brinda íconos vectoriales escalables que se pueden personalizar en términos de color, tamaño y en muchos más aspectos.
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
Sintaxis:
<button class="pure-button">
<i class="fa fa-iconname"></i>
...
</button>
Nota: Para obtener más información sobre los iconos de CSS puro y los botones de CSS puro, siga los artículos vinculados.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!--Import Pure Css files--> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" /> </head> <body> <center> <h1 class="text-success">Geeksforgeeks</h1> <strong>Pure CSS Button Icons</strong> <br><br> <button class="pure-button pure-button-primary"> <i class="fa fa-fire"></i> Fire Alarm </button> <button class="pure-button"> <i class="fa fa-trash"></i> Trash</button> </center> </body> </html>
Producción:
Iconos de botones CSS puros
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA