Muchas veces requerimos pequeños iconos de uso común para nuestro website, sea para los íconos de un menú o algún bontón.
Hace un tiempo aprendí este truco gracias a @sachalifs, es añadir un css que va a contener los iconos. Y poder usarlos como un elemento de texto dentro de nuestro website.
Utilizo el css de FontAwesome.
Explicaré un sencillo proceso para agregar este css y hacer un sencillo menú combinando íconos y textos.
Primero descargarse el paquete de fontawesome de su página oficial, para esto puedes hacer clic aqui
Una vez cargada la página, hacemos clic en Download Font Awesome Free for the Web
Guardamos los archivos y los extraemos en nuestra computadora. Los archivos incluidos son los siguientes.
Si alguno utiliza algún preprocesador y quisiera usarlos como en less o scss, les recomiendo leer la documentación para cada caso. Yo utilizaré css.
Para este caso sólo utilizaré el los siguientes archivos:
css/all.min.css
webfonts/*.*
Una vez localizados este archivo y la carpeta de webfonts, copiarlo a la carpeta de nuestro sitio. Y es hora de generar el archivo html de nuestro website.
En mi index.html generé un pequeño código
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>prueba FontAwesome</title></head><body><ul><li><ahref="#">User</a></li><li><ahref="#">Github</a></li><li><ahref="#">Home</a></li></ul></body></html>Esto generará una lista simple de 3 opciones
<linkrel="stylesheet"href="css/all.min.css">Ahora buscamos los iconos deseados en la galeria de fontawesome
Elegimos el que más nos guste y hacemos clic sobre él para ver los detalles
Si te das cuenta hay un pequeño código html sobre la imágen del icono y esto es lo que tienes que copiar en tu sitio para que aparezca.
<i class="fas fa-user"></i><body><ul><li><ahref="#"><iclass="fas fa-user"></i> User</a></li><li><ahref="#"><iclass="fab fa-github"></i> Github</a></li><li><ahref="#"><iclass="fas fa-home"></i> Home</a></li></ul></body>Esto hará que nuestro html se vea asi.
Ya aparecen los íconos junto al texto.
Ahora solo damos un poco de estilo con css.
<style>ul{
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
}
li{
margin: 15px;
}
a{
text-decoration: none;
color: black;
padding: 10px;
}
a:hover{
background-color: blue;
color: white;
border-radius: 5px;
}
.fas, .fab{
display: inline;
}
</style>El tamaño y color de los íconos será en función al tamaño y color del texto.
Ya de aquí queda de su imaginación cómo utilizar en su website estos iconos. Me resulta muy útil para menús o botones.
Si haz hecho algo con Font Awesome, comparte aqui un screenshot de tu interfaz.
Anahi ZA
Dios los bendiga siempre gracias por el post muy buena y concisa …nuevamente gracias CRACK
Gracias! compartiendo un poquito con la comunidad