La incorporación de fuentes de iconos con botones Pure es una tarea sencilla con Pure CSS. Dado que Pure CSS no viene con su propio paquete de íconos, estamos usando fuentes de íconos de Font Awesome .
Antes de crear botones con íconos, primero debemos incluir el archivo pure.css en nuestro archivo HTML directamente desde CDN. Luego vincule los archivos CSS de Font Awesome a su página.
Ejemplo 1: el siguiente código muestra los botones puros usando varias clases de CSS puro. Consulte los comentarios en el siguiente código e imagen de salida para una mejor comprensión.
HTML
<!DOCTYPE html> <html> <head> <!--Import Font Awesome icon pack--> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity= "sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous"/> <!--Import Pure Css files--> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/> </head> <body> <h2 style="color:green">GeeksforGeeks</h2> <p>Buttons using Pure CSS</p> <br/> <!--Use <i> element within class "pure-button"--> <button class="pure-button" href="#"> <i class="fas fa-phone-alt"></i> Phone </button> <button class="pure-button" href="#"> <i class="fas fa-envelope"></i> Message </button> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra otros botones usando las clases de Pure CSS. El desarrollador puede desarrollar sus propios botones personalizados, como un botón de éxito, como se muestra a continuación.
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Font Awesome icon pack-->
<link
rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
integrity=
"sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
crossorigin="anonymous"/>
<!--Import Pure Css files-->
<link
rel="stylesheet"
href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css"
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous"/>
<style>
.button-success {
color: white;
border-radius: 3px;
background: green;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<strong>Buttons using Pure CSS</strong>
<br />
<button class="pure-button">
<i class="fas fa-fire-alt"> Fire Work</i>
</button>
<button class="pure-button">
<i class="fa fa-bolt"> Lightning</i>
</button>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ankushingle8523 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA