0

Estoy tratando de usar gradientes en una fuente de fontawesome y no logro dar con el código apropiado para hacerlo. Mi idea es ponerle a una fuente que me trae el icono de instagram su respectivo degradado pero hasta ahora no lo he logrado... Solamente lo hace en el background pero no a la fuente en sí. Será posible hacerlo o yo estoy alucinando con hacer algo que no es viable? La verdad busqué en varios lugares pero solamente lo hace con texto plano pero no con elementos y sinceramente estoy desorientado. Esper haber sido claro en la pregunta y si no por favor diganme así la reformulo. Mi codigo es el siguiente:

/* globas */

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: #1f1e1e;
}

:root {
  --facebook: #168ef4;
  --twitter: #1fa3f3;
  --instagram1: rgba(252, 176, 69, 1);
  --instagram2: rgba(253, 29, 29, 1);
  --instagram3: rgba(131, 58, 180, 1);
  --youtube: #f90f00;
  --card-bg: rgb(247, 247, 247);
  --card-arrow: #30b97f;
  --gray: #5f616d;
}

.card {
  border-radius: 5px;
  overflow: hidden;
  background: var(--card-bg);
  text-align: center;
  padding: 2em 0;
  position: relative;
}

.card::before {
  content: "";
  height: 4px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.card.instagram::before {
  background-image: linear-gradient( 45deg, var(--instagram1) 0%, var(--instagram2) 50%, var(--instagram3) 100%);
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f717e;
  font-size: 0.9em;
}

.card-followers {}

.card-followers-number {
  font-size: 50px;
  font-weight: 700;
}

.card-followers-title {
  display: block;
  text-transform: uppercase;
  font-weight: 700;
  color: darkgrey;
  letter-spacing: 5px;
  font-size: 0.75em;
}

.card-today {
  color: var(--card-arrow);
  font-size: 0.7em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.instagram-social {
  /*Aquí intenté esto pero no funciona*/
  background-image: linear-gradient( 45deg, var(--instagram1) 0%, var(--instagram2) 50%, var(--instagram3) 100%);
  margin-right: 5px;
  font-size: 25px;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Social Dashboard</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/0bb154f3a0.js" crossorigin="anonymous"></script>

  <body>
    <article class="card instagram">
      <p class="card-title">
        <i class="fab fa-instagram instagram-social"></i> @DanielR
      </p>
      <p class="card-followers">
        <span class="card-followers-number">1987</span>
        <span class="card-followers-title">Followers</span>
      </p>

  </body>
  <html>

Les agradezco la respuesta.

1

1 respuesta 1

1

Si se puede, pero no es lo recomendable porque dependiendo del navegador que se utilice podría verse el color establecido o el negro de default. Lo mejor es utilizar un archivo svg y usando su sintaxis aplicar ese degradado para importar el archivo como imagen en la página, de esta manera se obtiene una mayor compatibilidad con los navegadores. Igualmente te dejo como hacer lo que quieres (lo he comprobado y funciona en Chrome y Edge).

.fa-instagram {
    font-size: 48px;
    background: -webkit-linear-gradient(#fdf497, #fd5949, #d6249f, #285AEB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />


<i class="fab fa-instagram instagram-social"></i>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.