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.