En este artículo, sabremos cómo usar los íconos CSS para agregar a la página HTML desde la biblioteca de íconos. Todos los íconos en la biblioteca se pueden formatear usando CSS. Se pueden personalizar según el tamaño, el color, la sombra, etc. El icono es una representación gráfica que transmite el significado específico para el que se utiliza y ayuda a navegar en consecuencia.
Hay 3 tipos de bibliotecas de iconos disponibles, a saber
- Iconos impresionantes de fuentes
- Iconos de Google
- Iconos de arranque
Incluiremos el enlace CDN requerido de la biblioteca de iconos disponible, lo que nos ayudará a usar las clases de iconos predefinidas o podemos personalizarlo usando el CSS.
Enfoque: para usar íconos, debemos agregar el enlace CDN requerido dentro de la sección <head>. Los siguientes pasos para agregar la clase predefinida en el HTML:
- Agregue el nombre de la clase de icono a cualquier elemento HTML en línea.
- Los elementos <i> y <span> se utilizan ampliamente para agregar iconos.
- Todos los íconos CSS son íconos vectoriales escalables que se pueden personalizar con las propiedades CSS requeridas, como tamaño, color, sombra, etc.
Nota: Toda la biblioteca mencionada anteriormente no requiere ninguna descarga o instalación.
Método 1: Iconos impresionantes de fuentes
Para usar los iconos de Font Awesome, agregue el siguiente enlace dentro de la sección <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Sintaxis:
<i class="fa fa-cloud"></i>
Podemos usar la propiedad de tamaño de fuente para que sean íconos de gran tamaño para mostrar. El siguiente ejemplo ilustra el uso de la propiedad font-size .
Ejemplo 1: en este ejemplo, hemos utilizado la propiedad de tamaño de fuente con cada clase de icono y cuyo valor se establece en 32 px.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h1>GeeksforGeeks</h1> <i class="fa fa-cloud" style="font-size:32px;"></i> <i class="fa fa-heart" style="font-size:32px;"></i> <i class="fa fa-file" style="font-size:32px;"></i> <i class="fa fa-car" style="font-size:32px;"></i> <i class="fa fa-bars" style="font-size:32px;"></i> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, hemos utilizado la clase » fa fa-heart » que tiene la propiedad de tamaño de fuente y la propiedad de color cuyos valores se establecen en 28px y rojo, azul respectivamente.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h1>GeeksforGeeks</h1> <i class="fa fa-heart" style="font-size:28px;color:red;"></i> <i class="fa fa-heart" style="font-size:30px;color:blue;"></i> <i class="fa fa-heart" style="font-size:32px;color:red;"></i> <i class="fa fa-heart" style="font-size:34px;color:blue;"></i> <i class="fa fa-heart" style="font-size:36px;color:red;"></i> </body> </html>
Producción:
Método 2: Iconos de Google
Para usar los íconos de Google, agregue el siguiente enlace dentro de la sección <head>.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Sintaxis:
<i class="material-icons">cloud</i>
Consulte la sección ¿Cómo usar el ícono de material de Google como estilo de lista en una página web usando HTML y CSS? artículo para saber cómo usar las propiedades CSS con la clase predefinida.
Ejemplo 1: en este ejemplo, hemos utilizado la clase » material-icons » con el icono requerido.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <h1>GeekforGeeks</h1> <i class="material-icons">cloud</i> <i class="material-icons">favorite</i> <i class="material-icons">attachment</i> <i class="material-icons">computer</i> <i class="material-icons">traffic</i> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, hemos utilizado la clase » material-icons » con la forma de la nube.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <h1>GeekforGeeks</h1> <i class="material-icons" style="font-size:30px;">cloud</i> <i class="material-icons" style="font-size:40px;">cloud</i> <i class="material-icons" style="font-size:50px;">cloud</i> <i class="material-icons" style="font-size:60px;">cloud</i> <i class="material-icons" style="font-size:70px;">cloud</i> </body> </html>
Producción:
Método 3: Iconos de Bootstrap
Para usar los iconos de Bootstrap, agregue el siguiente enlace dentro de la sección <head>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Sintaxis:
<i class="glyphicon glyphicon-cloud"></i>
Podemos usar la propiedad de tamaño de fuente para que sean íconos de gran tamaño para mostrar. El siguiente ejemplo ilustra el uso de la propiedad font-size con la clase predefinida.
Ejemplo 1: en este ejemplo, hemos utilizado la propiedad de tamaño de fuente con cada clase de glyphicon y todo el valor se establece en números diferentes.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <h1>GeekforGeeks</h1> <i class="glyphicon glyphicon-cloud" style="font-size:28px;"></i> <i class="glyphicon glyphicon-user" style="font-size:30px;"></i> <i class="glyphicon glyphicon-thumbs-up" style="font-size:32px;"></i> <i class="glyphicon glyphicon-remove" style="font-size:34px;"></i> <i class="glyphicon glyphicon-envelope" style="font-size:36px;"></i> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, hemos utilizado la clase » glyphicon glyphicon-thumbs-up » con la forma de pulgar hacia arriba y todo el valor se establece en diferentes números.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <h1>GeekforGeeks</h1> <i class="glyphicon glyphicon-thumbs-up" style="font-size:20px;"></i> <i class="glyphicon glyphicon-thumbs-up" style="font-size:30px;"></i> <i class="glyphicon glyphicon-thumbs-up" style="font-size:40px;"></i> <i class="glyphicon glyphicon-thumbs-up" style="font-size:50px;"></i> <i class="glyphicon glyphicon-thumbs-up" style="font-size:60px;"></i> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA