<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- aqui hay que poner el enlace a CDN -->
</head>
<body>
<div>Iconos sin diseño extra:</div>
<div>
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-face-smile"></i>
<i class="fa-solid fa-fire"></i>
<i class="fa-solid fa-fan"></i>
</div>
<div>Iconos cambiando tamaño y color:</div>
<div>
<span style="font-size: 3em; color: rgb(250, 32, 217);"> <i class="fa-solid fa-house"></i></span>
<span style="font-size: 2em; color: rgb(56, 41, 190);"> <i class="fa-solid fa-face-smile"></i></span>
<span style="font-size: 1.2em; color: rgb(157, 249, 37);"></span><i class="fa-solid fa-fire"></i></span>
<span style="font-size: 0.5em; color: rgb(137, 41, 24);"></span><i class="fa-solid fa-fan"></i></span>
</div>
<div>Iconos cambiando tamaño y animaciones usando sus clases:</div>
<div class="fa-3x" >
<i class="fa-solid fa-house fa-beat" style="--fa-animation-duration: 0.5s;"></i>
<i class="fa-solid fa-face-smile fa-beat-fade" style="--fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1;"></i>
</span><i class="fa-solid fa-fire fa-flip"></i>
</span><i class="fa-solid fa-fan fa-spin"></i>
</div>
</body>
</html>