Ejercicio 29 — Iconos con Librerías

En este ejercicio se utilizan dos librerías diferentes de iconos: Font Awesome y Material Icons. Se incorporan varios iconos de cada una y se permite personalizar uno de ellos aplicando un color y tamaño propio mediante CSS.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ejercicio Contorno</title>

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/3a4aaf85b1.js" crossorigin="anonymous"></script>

  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
</head>

<body>

  <h1>Font Awesome</h1>
  <i class="fa-solid fa-message"></i>
  <i class="fa-brands fa-figma"></i>
  <i class="fa-brands fa-youtube"></i>
  <i class="fa-brands fa-apple"></i>

  <h1>Google</h1>
  <span class="material-icons">home</span>
  <span class="material-icons">favorite</span>
  <span class="material-icons">settings</span>
  <span class="material-icons">send</span>

</body>
</html>

Para personalizar un icono, puedes añadir un estilo CSS como este:

.fa-message {
    color: #ff0000;
    font-size: 40px;
}

🚀 Ver resultado del ejercicio