Hilfe beim Ersetzen eines Icons

Ich versuche, das bars-Symbol zum Öffnen/Schließen der Seitenleiste gemäß dieser Anleitung zu ersetzen: Replace Discourse's default SVG icons with custom icons in a theme, aber ich habe nicht viel Erfolg.

Ich habe ein Sprite-Sheet mit dem gewünschten Symbol für die Seitenleiste erstellt (unscharf gemacht, da es sich um ein Pro-Font-Awesome-Symbol handelt)

Eine Komponente erstellt und das Sprite-Sheet hochgeladen:

Und diesen Code verwendet (ich möchte die Änderung nur auf dem Desktop):

Aber ich bekomme einfach kein Symbol:

Irgendwelche Ideen? Ich bin mir sicher, dass ich etwas Kleines und Dummes übersehe! Danke!

Haben Sie es mit einem Kleinbuchstaben-Asset-Dateinamen versucht (z. B. npn_spritesheet.svg)?
denn ansonsten sieht es so aus, als sollte es funktionieren (ich kann es leicht mit einem v5-Icon machen, aber ich habe keine v6-Pro-Icons).

es sei denn, es liegt einfach daran:

Was sehen Sie, wenn Sie das Element <span> class="header-sidebar-toggle"> links neben Ihrem Website-Logo inspizieren?

Zum Beispiel haben Sie keine Viewbox auf dem Symbol-Tag deklariert, das Symbol könnte einfach außer Sichtweite sein.

2 „Gefällt mir“

Seltsamerweise, wenn ich dieses Asset lösche und mit einer Kleinbuchstabenversion neu hochlade (ich habe es sogar in npnassets.svg umbenannt, sehe ich immer noch den alten Dateinamen…

Da ich die SVG heruntergeladen und manuell in das Sprite-Sheet eingefügt habe, glaube ich nicht, dass dies ein Problem sein sollte. Deshalb habe ich diesen Weg gewählt, da v5 kein Sidebar-Icon hat.

2 „Gefällt mir“

Sie müssten das SVG-Element und alle darin verschachtelten Elemente erweitern, um den Icon-Code zu sehen.

1 „Gefällt mir“

Der Icon-Code aus dem Sprite-Sheet wird nicht gerendert. Sie könnten immer noch versuchen, die ID des Icons in einen Namen ohne Bindestrich zu ändern, wie z. B. npnsidebar. Manchmal treten Probleme mit Variablennamen in Themes auf, deren eigentliche Ursache ich nicht ermitteln kann, aber eine kleine Anpassung behebt es.

Andernfalls könnten Sie die SVG-Datei teilen. Ich habe gesehen, dass Sie den eigentlichen Code verpixelt haben, aber er wird ohnehin öffentlich zugänglich sein, wenn Sie ihn auf Ihrer Live-Site verwenden (Bearbeitung: Ah, ich habe nicht gesehen, dass er aus dem Pro-Plan stammt…).

1 „Gefällt mir“

Danke, ich habe versucht, den Namen in npnsidebar in der Sprite-Tabelle und im Code zu ändern, was es mir auch ermöglicht hat, die Sprite-Tabelle richtig zu ersetzen. Aber leider hat es nicht geholfen. Ich kann Ihnen die Sprite-Tabelle und das SVG per DM schicken, um meine Arbeit zu überprüfen. Vielen Dank für Ihre Hilfe!

2 „Gefällt mir“

Wenn Sie das bars-Symbol durch ein anderes Symbol aus dem Standardsatz ersetzen, funktioniert der Ersatz? Sagen wir, ersetzen Sie es durch cog oder comment.

Wenn das funktioniert, dann liegt das Problem bei Ihrem benutzerdefinierten SVG-Symbolcode. Es benötigt wahrscheinlich ein viewBox-Attribut. So wie dieses benutzerdefinierte Symbol (für die Gifs-Theme-Komponente):

5 „Gefällt mir“

Ich habe es gestern auf diese Weise durch ein Standard-Symbol (das Code-Symbol) ersetzt und es hat funktioniert, daher denke ich, dass es tatsächlich das viewBox-Attribut ist, wie Sie sagen.

4 „Gefällt mir“

Das war’s, vielen Dank wie immer, Penar!

4 „Gefällt mir“

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.