Estoy tratando de cambiar un ícono de Font Awesome en acción usando JS. Estoy implementando el ícono a través del pseudo elemento ::before .
Asignar el ícono a través de CSS usando content:'\f0c2' muestra bien el ícono, pero si transfiero la cadena a través de un conjunto de datos - content: attr(data-content) , simplemente representa la cadena en la página.
¿Cómo puedo hacer que funcione? Hay una mejor manera de hacerlo?
Aquí hay un JSFiddle con todo el código relevante que he usado.
const element = document.querySelector('.data'); const btn = document.querySelector('.btn'); const changeIcon = () => { element.dataset.content = '\\f185'; } btn.addEventListener('click', changeIcon); .container { display: grid; place-items: center; margin-top: 6rem; font-family: sans-serif; color: lightblue; gap: 1rem; } .btn { padding: 1em 2em; background-color: lightblue; color: white; border-radius: 10px; } .btn:hover { background-color: white; color: lightblue; border: 1px solid lightblue; } .icon-before::before { display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; font: var(--fa-font-solid); margin-right: 0.2em; } .string::before { content: '\f0c2'; } .data::before { content: attr(data-content); } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class='container'> <h2 class='element string icon-before'> Added through string </h2> <h2 class=' element data icon-before' data-content="\f0c2"> Added through dataset </h2> <a class='btn'>Press Me</a> </div>const changeIcon = () => { element.dataset.content = String.fromCharCode(0xf0c2); }