Uso de Font Awesome

by victorpv83

HTML

<script src="https://kit.fontawesome.com/b0d2136a38.js"></script>
<!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>