Von Text zum Icon

[Radu]

Wie kann ich den Text aus dem Screenshot mit einem beliebigen SVG-Symbol (beliebig) nur mit CSS ersetzen?

Vielen Dank!

[NateDhaliwal]

Sie müssen zuerst Ihre SVG-Datei im Abschnitt “Uploads” hochladen. Für den SCSS-Variablennamen wählen Sie etwas Kurzes und Prägnantes.
Fügen Sie dann diesen Teil zum Reiter “Common” hinzu:

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

Beachten Sie, dass Sie keine Anführungszeichen in die url-Klammern setzen sollten.

[Canapin (Coin-coin le Canapin)]

Don hat ein Hilfswerkzeug für die Verwendung von Icons in CSS erstellt:

Discourse Easy 'SVG Icon' and 'Emoji' in CSS

Hello This topic contain two theme component. Discourse Easy SVG Icon CSS This theme component is functional as a template, please fork it on Github or use the code to your project. You can remove the icons svg codes from the SCSS and only keep those what you really actually use… I have imported the mixin file to the common.scss file so you can add your code below that line or separately to the desktop or mobile section. The theme component add the ability to keep the SVG…

[Radu]

Es tut mir leid, ich verstehe es nicht. Was meinst du mit $name-of-variable? Ich versuche, SVG-Code nach content: einzufügen, und es funktioniert nicht.

[Radu]

Vielen Dank @Canapin, aber ich möchte keine zusätzlichen Komponenten installieren, um das Wort „Antworten“ durch SVG-Code zu ersetzen.

[NateDhaliwal]

Der Variablenname ist derjenige, den Sie beim Hochladen der SVG-Datei eingegeben haben.

Sie müssen Administrator sein, um dies tun zu können.

---

1. Gehen Sie im Forum zu /admin.
2. Wählen Sie in der Seitenleiste unter dem Abschnitt „Anpassungen“ die Option „Komponenten“ und erstellen Sie eine neue.
3. Laden Sie die SVG-Datei im Abschnitt „Uploads“ am Ende der Komponentenseite hoch.
4. Wählen Sie einen Namen für die Variable (im Modal zum Hochladen der Datei)
5. Verwenden Sie den Code in meinem Beitrag:

@NateDhaliwal

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

6. Ersetzen Sie name-of-variable durch den Namen, den Sie in Schritt 4 gewählt haben. Behalten Sie das $ vor dem Variablennamen bei.
7. Sie sind fertig!

[Radu]

Vielen Dank, es ist jetzt sehr klar.

Kurze Frage: Wenn ich sagen wir 10 Icons habe, muss ich die Icons dann einzeln hochladen?

[NateDhaliwal]

Ja, ich glaube schon.

[NateDhaliwal]

@Radu Falls mein Leitfaden nicht funktioniert, können Sie diesem Leitfaden folgen, wo Sie meiner Meinung nach nur 1 Datei für mehrere Icons hochladen können:

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[Radu]

Das war ein toller Beitrag und er hat mir geholfen, die Standard-Icons zu ersetzen. Noch eine Sache, wenn ich darf…

Wie kann ich im Folgenden ein FontAwesome-Icon in content einfügen?

th.topic-list-data.posts.num > span {
    visibility: hidden;
}

th.topic-list-data.posts.num > span:after {
    content:'ein FontAwesome Icon hier';
    visibility: visible;
    display: inline-block;
    padding-bottom: 1.2em;
}

[NateDhaliwal]

Sie können es als SVG herunterladen und dann dasselbe tun. Andernfalls müssen Sie eine Komponente erstellen, was komplexer sein wird.

[Radu]

Gibt es also keine Möglichkeit, so etwas zu tun?

content:'fa d-icon d-icon-reply';

Wenn nicht, wie würde der Code für die folgende Methode aussehen? Ich brauche nur ein Beispiel, von dem ich ausgehen kann, denn ich habe es mit einfachem CSS versucht und es hat keine Wirkung.

@NateDhaliwal

Sie können es als SVG herunterladen und dann dasselbe tun.

Vielen Dank im Voraus!

[NateDhaliwal]

@Radu

content:'fa d-icon d-icon-reply';

Nein, aber du kannst die gleiche Methode verwenden, wie du sie bei früheren Methoden angewendet hast. Lade sie hoch und füge sie dann als SVG-Datei hinzu, wie du es mit der Anleitung gemacht hast:

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[NateDhaliwal]

@Radu

Wenn nicht, wie würde der Code für die folgende Methode aussehen? Ich brauche nur ein Beispiel, von dem ich anfangen kann, weil ich einfaches CSS ausprobiert habe und es keine Wirkung hat.

Ich bin mir nicht sicher, wo Sie das Symbol platzieren möchten. Könnten Sie einen Screenshot senden?
Danke.

[Radu]

Es spielt keine Rolle, wo, ich möchte nur ein FA-Symbol in die Zeile content:'...' einfügen

Ich denke, ich werde FA als Schriftfamilie und Unicodes innerhalb der content-Methode verwenden.

[NateDhaliwal]

Sie könnten Folgendes tun:

@NateDhaliwal

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

Ich bin mir nicht zu 100 % sicher, ob das funktioniert, aber ich bin mir ziemlich sicher, dass es das tut.