Usar iconos de boxicons
Tiempo de lectura: 1 minutos
Si necesitas iconos par representar los menús, opciones, links y detalles de tu web, usando iconos que se puedan escalar, y que tengan una uniformidad en el estilo, entonces necesitas boxicons.
boxicons
Boxicons es una colección enorme de iconos, open source, con licencias de uso CC 4.0, SIL OFL 1.1 y MIT License, de manera que se pueden utilizar sin problema en tus proyectos.
Tenemos dos formas de incorporarlos a una web, a través del componente web
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js">
</script> para utilizar un icono solo necesitas añadir el elemento box-icon, así:
<box-icon name="rocket"></box-icon> Y se visualiza el icono
Atributos
Además, hay atributos para poder cambiar el estilo de los iconos, por ejemplo, usando el atributo type podemos mostrarlo solido o podemos mostrar un logo. Hay muchos atributos para poder manipular los iconos. Incluso rotar o animar.
<box-icon type="solid" name="rocket"></box-icon>
<box-icon type="logo" name="facebook-square"></box-icon> Este sería el código del ejemplo:
<!DOCTYPE html>
<html>
<head>
<script
src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js">
</script>
</head>
<body>
<box-icon type="solid" name="rocket"></box-icon>
<box-icon type="logo" name="facebook-square"></box-icon>
</body>
</html> Otra forma de utilizarlos es como si fueran fuentes. En este caso hemos de incluir la hoja de estilo CSS para cargar la fuente
<link
href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'
rel='stylesheet'> Para utilizar un icono en tu página, añade el prefijo bx- para los icono normales, bsx- para los iconos sólidos y bxl- para los logos, como el mostrado en el ejemplo anterior, seguido del nombre del icono y la clase bx
<i class='bx bx-user'></i>
<i class='bx bxs-user'></i>
<i class='bx bxl-facebook-square'></i> Y tendríamos este resultado, como fuente:
Código completo
Este sería el código del ejemplo:
<!DOCTYPE html>
<html>
<head>
<link
href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'
rel='stylesheet'>
</head>
<body>
<i class='bx bx-user'></i>
<i class='bx bxs-user'></i>
<i class='bx bxl-facebook-square'></i>
</body>
</html> Y no solo eso, sinó que, entre otras cosas, podemos animarlos al pasar por encima con el cursor:
<i class='bx bxs-like bx-spin-hover'></i>
<i class='bx bxs-like bx-tada-hover'></i>
<i class='bx bxs-like bx-flashing-hover'></i>
<i class='bx bxs-like bx-burst-hover'></i>
<i class='bx bxs-like bx-fade-left-hover'></i>
<i class='bx bxs-like bx-fade-right-hover'></i>
<i class='bx bxs-like bx-fade-up-hover'></i>
<i class='bx bxs-like bx-fade-down-hover'></i> Tienes todos los iconos en este enlace https://boxicons.com, puedes usar el link más abajo para hacer clic.
