Symbol anpassen ohne globale Ersetzung

Merkmal
1

Hallo, ich möchte mich nach der Möglichkeit erkundigen, die Anpassung von Symbolen zu ermöglichen, die keine globale Symbolersetzung durchführen. Wenn ich beispielsweise das Plus-Symbol + nur zum Senden einer Nachricht durch ein Papierfliegersymbol ersetzen möchte, würde ich am Ende alle ±Symbole auf der gesamten Website ersetzen, es sei denn, ich habe diese Option in der Dokumentation übersehen. Ich hätte wirklich gerne die Möglichkeit, eine ID/Klasse oder ein Element zu identifizieren, wo ich das Symbol speziell ersetzen könnte.

1 „Gefällt mir“
2

Mit CSS können Sie eine bestimmte Instanz eines Symbols anvisieren und ersetzen.

Dieses Thema scheint einige Informationen zu enthalten:

3

Ich habe das versucht und es funktioniert nicht, zumindest nicht mit der aktuellen Discourse-Installation, die ich habe. Zweitens scheint dies keine einzelne Icon-Instanz zu ersetzen, da es alle Icons basierend auf dem angegebenen Icon-Selektor ersetzt.

Derzeit ersetze ich das Symbol „Neues Thema“ wie folgt:

  api.onPageChange(() => {
    const button = document.querySelector("#create-topic");

    if (button) {
      const oldSvg = button.querySelector("svg");
      if (oldSvg) {
        oldSvg.remove();
      }
      const ns = "http://www.w3.org/2000/svg";
      const svg = document.createElementNS(ns, "svg");
      svg.setAttribute("xmlns", ns);
      svg.setAttribute("viewBox", "10 10 30 30");
      svg.setAttribute("width", "28");
      svg.setAttribute("height", "28");
      svg.setAttribute("class", "svg-icon custom-icon");
      svg.innerHTML = `
        (svg icon code here)
      `;

      button.insertBefore(svg, button.firstChild);
    }
  });

Obwohl ich dies für die gewünschten Bereiche replizieren könnte, funktioniert es bei Composer-Icons nicht so gut, wo ich eine globale Icon-Ersetzung durchführen musste, wie der von Ihnen geteilte Link erwähnt.

4

Im Moment ist das außerhalb einiger Sonderfälle nicht möglich.

Dieses Thema ist eine doppelte Anfrage, daher werde ich dieses zugunsten von Change single instance of icon schließen, das auch ein Beispiel für das Hinzufügen eines Icons über CSS enthält.

Stimmen Sie gerne dafür ab und fügen Sie dort bei Bedarf weitere Details hinzu!

3 „Gefällt mir“
5

Duplikat von Change single instance of icon