Para nuestros proyectos web, un recurso muy utilizado son los iconos de Font Awesome.
A la hora de desarrollar un proyecto en base a un diseño, la mayoría de veces tenemos que implementar muchas imágenes, ésto hace que nuestra web sea más pesadas, ya que el uso de archivos tipo png o jpg, ocupan demasiado espacio en nuestro proyecto.
Actualmente existen varias webs donde podremos encontrar la mayoría de estos iconos en formato fuente.
¿Usar los iconos en formato fuente?
Pues, que estos iconos son una especie de tipografía como cuando utilizamos en cualquier programa de edición de texto alguna fuente como Time News Roman, Arial...
Aquí es donde entra los iconos de Font Awesome, como tantos otros.
Para poder usarlo en nuestra web, lo primero que tenemos que hacer es irnos a su web que es:
https://fontawesome.com/
Posteriormente pulsamos en Start for Free
En el hueco escribimos nuestro email y nos mandará un acceso para podernos registrar.
Que posteriormente lo que nos dirá es como implementarlo en nuestra web y es poniendo dentro del head el siguiente script:
<script src="https://kit.fontawesome.com/a6bcff7e8f.js" crossorigin="anonymous"></script>
A continuación he realizado el siguiente archivo html que es muy simple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/a6bcff7e8f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-5 bg-dark p-2">
<a href="" class="btn btn-success p-2"><i class="fas fa-thumbs-up mr-2 "></i>Aceptar</a>
</div>
<div class="container mt-5 bg-primary p-2">
<a href="" class="btn btn-success p-2"><span class="fab fa-wordpress-simple fa-4x fa-rotate-180 p-2"></span></i>Cancelar</a>
</div>
</body>
</html>
Aquí como se puede observar he puesto bootstrap y font awesome.
¿Cómo elegir nuestro icono?
Nos vamos a la web de font awesome, y pinchamos en icons
Posteriormente pinchamos en Free que se encuentra a nuestra izquierda, y nos saldrá los iconos gratuitos.
Posteriormente escribimo para encontrar un icono que deseemos, escribir el nombre en ingles.
Seguidamente pinchamos en el icono elegido
En esta imagen, a la derecha del recuadro negro, existe un boton para copiar el código html, y ese código será necesario para ver dicho icono en nuestra web.
También podermos cambiar el tamaño del icono añadiendo algunos de éstos:
fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.....
¿Podemos rotar los iconos?
También se pueden rotar añadiendo alguna clase:
fa-rotate-90, fa-rotate-180, fa-rotate-270, fa-flip-horizontal, fa-flip-vertical, fa-flip-both
Hemos puesto el icono dentro de las etiquetas <a></a> que son las del enlace tipo botón.
Con el código anterios así nos ha quedado, simplemente es un ejemplo para pode ver los iconos.
No hay comentarios:
Publicar un comentario
Gracias por participar en esta página.