En este artículo, aprenderemos cómo usar íconos en Pure CSS y comprenderemos su implementación a través de ejemplos. Pure CSS no tiene ningún componente de ícono, hay tantos paquetes de íconos disponibles que se pueden usar en Pure CSS. En todos esos paquetes de íconos, hay 3 paquetes de íconos más fáciles de usar que se describen a continuación:
- Í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
- Iconos de material de Google: los iconos se pueden agregar a nuestra página HTML desde la biblioteca de iconos. Todos los íconos en la biblioteca se pueden formatear usando CSS. Se pueden personalizar según tamaño, color, sombra, etc.
https://fonts.googleapis.com/icon?family=Material+Iconos
- Iconos de Bootstrap: los iconos de Bootstrap están diseñados para funcionar con los componentes de Bootstrap, desde los controles de formulario hasta la navegación. Los iconos de Bootstrap son SVG, por lo que se escalan de forma rápida y sencilla.
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css
Los siguientes ejemplos ilustrarán el uso de estos paquetes con Pure CSS.
Ejemplo 1: En este ejemplo, usaremos un ícono de fuego para 3 paquetes diferentes. Estos íconos tienen diferentes apariencias con diferentes clases para estos 3 paquetes.
Ejemplo :
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://yui.yahooapis.com/pure/0.6.0/pure-min.css" /> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" /> <link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <h1>GeeksforGeeks</h1> <h2>Pure CSS Icon</h2> <strong>Font Awesome Icons</strong> <i class="fa fa-fire"></i> <br /> <strong>Google Material Design Icons</strong> <i class="material-icons">whatshot</i> <br /> <strong>Bootstrap Icons</strong> <i class="glyphicon glyphicon-fire"></i> </body> </html>
Producción:
Ejemplo 2: Este ejemplo ilustra el uso de íconos de botón en Pure CSS. Utilizaremos el mismo ejemplo que hemos usado anteriormente e implementaremos el ícono del botón en él. Consulte la sección ¿Cómo usar botones con íconos usando Pure CSS? artículo para más detalles.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity= "sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous" /> <meta name="viewport" content= "width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://yui.yahooapis.com/pure/0.6.0/pure-min.css" /> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" /> <link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> </head> <body> <h1>GeeksforGeeks</h1> <h2>Pure CSS Icon</h2> <strong>Font Awesome Icons</strong> <button> <i class="fa fa-fire"></i> </button> <br /> <strong>Google Material Design Icons</strong> <button> <i class="material-icons">whatshot</i> </button> <br /> <strong>Bootstrap Icons</strong> <button> <i class="glyphicon glyphicon-fire"></i> </button> </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