# Cambiare un'istanza singola di icona

**URL:** <https://meta.discourse.org/t/change-single-instance-of-icon/336356>\
**Category:** Feature\
**Created:** [15 Novembre 2024, 3:31pm UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356 "2024-11-15T15:31:56Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

**Author:** ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)\
**Post date:** [15 Maggio 2025, 3:10pm UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/11 "2025-05-15T15:10:02Z")

</div>

@awesomerobot Ecco un codice aggiornato di ciò che ho fatto per cambiare l’icona di creazione argomento che è un + senza modifiche globali a tutti i +

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        const button = document.querySelector("#create-topic");

        if (button) {
            // Nascondi temporaneamente il pulsante mentre sostituiamo l'icona
            button.style.display = "none";

            // Cerca l'SVG all'interno del pulsante
            const oldIcon = button.querySelector("svg");
            if (oldIcon) {
                // Rimuovi l'icona esistente (SVG)
                oldIcon.remove();
            }

            // Crea un nuovo SVG per l'icona Font Awesome (fa-feather-pointed)
            const newIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            newIcon.setAttribute("class", "fa d-icon d-icon-feather-pointed svg-icon svg-string");
            newIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
            newIcon.innerHTML = '<use href="#feather-pointed"></use>';

            // Inserisci la nuova icona all'interno del pulsante
            button.insertBefore(newIcon, button.firstChild);

            // Mostra di nuovo il pulsante dopo la sostituzione dell'icona
            button.style.display = "block";
        }
    });
</script>

```

Devo perfezionarlo un po’ di più per modifiche multiple di icone

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // Elenco di selettori di pulsanti e relativi contenuti SVG personalizzati
        const iconsToReplace = [
            { selector: "#create-topic", newSVG: `
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M12 2L15 5H13V9H11V5H9L12 2ZM3 12L5 10V13H9V15H5V18L3 16V12ZM21 12L19 10V13H15V15H19V18L21 16V12Z" />
                </svg>
            ` },
            { selector: "#some-other-button", newSVG: `
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M21 3H3C2.44772 3 2 3.44772 2 4V20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20V4C22 3.44772 21.5523 3 21 3ZM20 19H4V5H20V19Z" />
                </svg>
            ` },
            { selector: "#another-button", newSVG: `
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M12 2L8 6H10V10H14V6H16L12 2ZM12 12L8 16H10V20H14V16H16L12 12Z" />
                </svg>
            ` }
        ];

        iconsToReplace.forEach(icon => {
            const button = document.querySelector(icon.selector);

            if (button) {
                // Nascondi temporaneamente il pulsante mentre sostituiamo l'icona
                button.style.display = "none";

                // Cerca l'SVG esistente all'interno del pulsante
                const oldIcon = button.querySelector("svg");
                if (oldIcon) {
                    // Rimuovi l'icona esistente (SVG)
                    oldIcon.remove();
                }

                // Crea un nuovo elemento SVG e imposta il suo contenuto
                const newIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                newIcon.innerHTML = icon.newSVG; // Imposta il contenuto SVG personalizzato

                // Inserisci la nuova icona SVG all'interno del pulsante
                button.insertBefore(newIcon, button.firstChild);

                // Mostra di nuovo il pulsante dopo la sostituzione dell'icona
                button.style.display = "block";
            }
        });
    });
</script>

```

---

_[View the full topic](https://meta.discourse.org/t/change-single-instance-of-icon/336356)._