Día 45: CSS Icons

Día 45: CSS Icons

La ruta del desarrollador web frontend autónomo🤹‍♂️


Los iconos se pueden agregar fácilmente a su página HTML mediante el uso de una biblioteca de iconos.


¿Cómo agregar iconos?

La forma más sencilla de agregar un ícono a su página HTML es con una biblioteca de íconos, como Font Awesome.

Agregue el nombre de la clase del icono especifico a cualquier elemento HTML en línea (como <i> o <span>).

A continuación, todos los íconos en las bibliotecas de íconos son vectores escalables que se pueden personalizar con CSS (tamaño, color, sombra, etc.)


Íconos de Font Awesome

Para usar los íconos de Font Awesome, vaya a fontawesome.com, inicie sesión y obtén el código para agregar en la sección <head> de su página HTML:

<script src="https://kit.fontawesome.com/*yourcode*.js" crossorigin="anonymous"></script>

Nota: No se necesita descargar o instalar.

Ejemplo:


Íconos de Bootstrap

Para usar los glifos de Bootstrap, agregue la siguiente línea dentro de la sección <head> de su página HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Nota: No se necesita descargar o instalar.

Ejemplo:


Íconos de Google

Para usar los íconos de Google, agregue la siguiente línea dentro de la sección <head> de su página HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Nota: No se necesita descargar o instalar.

Ejemplo:


Resumen

Los iconos se pueden agregar fácilmente a una página HTML mediante el uso de bibliotecas de iconos como Font Awesome, Bootstrap o Google. Los iconos son vectores escalables que se pueden personalizar con CSS. Para usarlos, simplemente agregue el nombre de la clase del icono a cualquier elemento HTML en línea.


Traducido con 💚 desde W3Schools.com

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!