Benutzerdefinierte Header-Links (Icons)

[Discourse]

	Zusammenfassung	Benutzerdefinierte Header-Links (Icons) ermöglichen es Ihnen, ganz einfach verlinkte Icons zum Discourse-Header hinzuzufügen.
	Vorschau	Vorschau im Discourse Theme Creator
	Repository-Link	https://github.com/discourse/discourse-icon-header-links
	Neu bei Discourse-Themes?	Anfängerleitfaden zur Verwendung von Discourse-Themes

Dieses Theme-Komponente installieren

Da es sich um eine #offizielle Theme-Komponente handelt, die vom Discourse-Team gepflegt wird, können #Support-, #Bug-, #UX- und #Feature-Anfragen in den jeweiligen Kategorien hier auf Meta gestellt und mit dem entsprechenden Theme-Komponenten-Tag versehen werden. Klicken Sie auf einen der untenstehenden Links, um einen neuen Beitrag zu starten.

 Support  Bug  UX  Feature

Funktionen

Screenshots

Desktop

Mobil

Einstellungen

Diese Komponente enthält eine Theme-Einstellung, mit der Sie beliebig viele Links hinzufügen, deren Icons festlegen und entscheiden können, auf welchen Geräten sie angezeigt werden!

Name	Beschreibung
header links	Liste von Links mit folgenden Eigenschaften: Titel, Icon, URL, Ansicht und Ziel
add whitespace	Wenn aktiviert, wird etwas Abstand zwischen den Standard-Discourse-Header-Icons und den über diese Komponente hinzugefügten benutzerdefinierten Icons eingefügt
Svg icons	Enthält FontAwesome 6-Icon-Klassen für jedes in der Liste verwendete Icon.

Hinweise:

• Die URL kann absolut (https://www.example.com) oder relativ (/c/staff) sein.
• Icons können beliebige FontAwesome 6 (kostenlose) Icon-Namen ohne die Teile fa-, fab-, fas- oder far- sein oder eine URL zu einem Bild.

Wenn das gewünschte Icon nicht angezeigt wird, fügen Sie es in der Einstellung svg_icons der Komponente hinzu. Bei neuen Icons müssen diese mit den FontAwesome 6-Präfixen wie fab, far und fas versehen werden.

Credits

Dies basiert auf @techAPJs großartiger Anleitung hier: (Superseded) Add new link on header beside search icon sowie auf @vinothkannans’ Brand Header Theme, das eine hervorragende Referenz für die Struktur dieser Komponente war.

Von uns gehostet? Theme-Komponenten können in unseren Standard-, Business- und Enterprise-Plänen verwendet werden.

[MichelleBarnett]

Ich habe ein ähnliches Problem wie einige der oben genannten Personen: Das Symbol wird nicht angezeigt, aber der Button lässt sich trotzdem anklicken. Ich habe die Einstellung für das Symbol so geändert, dass dort (zum Beispiel) „fab-facebook-f

[MichelleBarnett]

Ich habe Facebook verstanden, aber mit LinkedIn klappt es immer noch nicht. Gibt es außerdem eine Möglichkeit, ein benutzerdefiniertes Symbol zu erstellen? Könnte ich das Logo meines Unternehmens hochladen und als Symbol verwenden?

[dylanh724 (dh)]

@MichelleBarnett

Ich habe ein ähnliches Problem

Ich auch – beim Discord-Symbol.

Warum fehlt der Abschnitt „SVG-Icons

[awesomerobot (Kris)]

Der Screenshot der Einstellungen sieht aus wie die Komponente unter Custom Header Links - #84, die dafür gedacht ist, Textlinks und keine Symbole anzuzeigen.

Ich verstehe, warum die Benennung der Komponenten verwirrend sein kann:

• https://github.com/discourse/discourse-header-links – Symbol-Links (dieses Thema)
• https://github.com/discourse/discourse-custom-header-links – Textlinks (Custom Header Links)

Vielleicht solltest du @Johani den Begriff „Symbol

[dylanh724 (dh)]

Ah, das hat es tatsächlich gelöst. Yep – super verwirrend. Ein Umbenennen wäre toll!

EDIT: Das jüngste Update schien auch Discords Klassennamen heimlich so zu ändern, dass “fab-” dazwischen eingefügt wurde (z. B. wenn du die Icon-Farbe ändern möchtest; was @OP zu einer großartigen nativen Funktion machen würde – war etwas schwer zu bemerken).

[Johani (Joe)]

@MichelleBarnett

aber ich bekomme LinkedIn immer noch nicht hin

Für LinkedIn kannst du in dieser Einstellung fab-linkedin als Icon-Name verwenden

Da dieses Icon jedoch nicht im Standard-Icon-Set enthalten ist, das Discourse verwendet, musst du es auch in der anderen Einstellung der Komponente hinzufügen.

Das Ergebnis sieht bei mir so aus

@MichelleBarnett

Könnte ich das Logo meines Unternehmens hochladen und als Icon verwenden?

Klar, in diesem Thema gibt es einen Abschnitt zum Hinzufügen benutzerdefinierter Icons.

Introducing Font Awesome 5 and SVG icons

See also: We're upgrading our icons to Font Awesome 6! We will shortly merge into master a branch that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG icons instead of an icon font. This is a substantial change, with lots of benefits, and one significant change for developers. Here is a quick rundown of the changes: using SVG icons will provide crisper icons, better for accessibility and easier to customize, see this Github article for more details since…

Sobald du das eingerichtet hast, kannst du alle benutzerdefinierten Icons verwenden, die du zu diesem Theme-Component hinzufügst. Schaue dort bitte nach und lass mich wissen, falls du auf Probleme stößt.

@awesomerobot

Vielleicht solltest du ein Icon zum Namen dieses Elements hinzufügen, @Johani?

Ich habe diese Änderung vorgenommen, zusammen mit einigen weiteren Verbesserungen der Implementierung hier

DEV: removes jQuery and improves implementation

@dylanh724

wenn du die Farbe der Icons ändern möchtest

Das neue Update fügt jedem Link basierend auf dem verwendeten Titel eindeutige, mit einem Präfix versehene Klassen hinzu. Wenn du also

facebook, fab-facebook, https://facebook.com, vdm, blank

verwendest, erhält der Link die Klasse

header-icon-facebook

Die Vorlage lautet header-icon-ICON-TITEL

Diese kannst du dann per CSS wie folgt ansprechen

.d-header-icons {
  .header-icon-facebook svg {
    fill: #4267b2;
  }

  .header-icon-twitter svg {
    fill: #1da1f2;
  }

  // füge hier weitere Icons hinzu
}

was zu einem Ergebnis wie diesem führt

[MichelleBarnett]

Vielen Dank für Ihre Hilfe. Ich habe versucht, “fab-linkedin” sowohl in der Kategorie “Header-Links” als auch in “SVG-Icons” zu verwenden. Wie auf dem Bild zu sehen ist, funktioniert es aus irgendeinem Grund immer noch nicht.

Der graue Kreis ist der Ort, an dem sich das LinkedIn-Logo befinden würde. Haben Sie noch weitere Ideen, wie man das Problem beheben kann?

[Johani (Joe)]

Ich bin mir nicht ganz sicher, warum das bei dir nicht funktioniert. Hier sieht meine Konfiguration so aus:

Facebook, fab-facebook, https://facebook.com, vdm, blank
Twitter, fab-twitter, https://twitter.com, vdm, blank
LinkedIn, fab-linkedin, https://www.linkedin.com, vdm, blank

und

fab-facebook
fab-linkedin
fab-twitter

und hier ist das, was ich sehe:

Könntest du bitte dasselbe für das LinkedIn-Symbol ausprobieren und mir sagen, ob dein Problem weiterhin besteht?

[MichelleBarnett]

Das ist das, was ich bisher versucht habe, und ich habe auch verschiedene Icons ausprobiert. So sieht es aktuell bei mir aus.

Einstellungen:

Webseite:

Die einzigen, die funktionieren, sind diejenigen, die kein „fab-

[pmusaraj (Penar Musaraj)]

Hallo Michelle,

Da du ein Kunde bist, habe ich mich in deine Website eingeloggt und das Problem für dich behoben. Ich habe die Theme-Komponente aktualisiert und die richtigen Einstellungen für die Icons vorgenommen. Jetzt sollten alle funktionieren.

[MichelleBarnett]

Es sieht jetzt großartig aus, danke!

[MichelleBarnett]

Noch eine Frage/eine Bitte: Die Links öffneten ursprünglich in einem neuen Tab, öffnen sich jetzt aber im gleichen Tab. Die Einstellung ist bereits auf “blank” gesetzt. Wie kann ich das noch ändern?

[pmusaraj (Penar Musaraj)]

Das sieht nach einer Regression aus. Wir werden uns das ansehen und bald eine Lösung bereitstellen.

[Johani (Joe)]

@pmusaraj

Das sieht nach einer Regression aus.

Stimmt. Ich habe bei den jüngsten Änderungen versehentlich das Attribut target vergessen.

@MichelleBarnett

Die Einstellung ist bereits auf „blank“ gesetzt. Wie kann ich das sonst ändern?

Sie müssen nichts unternehmen. Ich habe die Komponente korrigiert und auf Ihrer Website aktualisiert. Jetzt sollte also alles in Ordnung sein. Vielen Dank, dass Sie das Problem gemeldet haben

[Canapin (Coin-coin le Canapin)]

Hallo,

Die benutzerdefinierten Symbole befinden sich rechts neben den Buttons für „Anmelden“ und „Registrieren“. Ich denke, sie würden besser auf der linken Seite passen, wie es üblich ist.

[Jonathan5]

Ich kann einige Icons der Version 4.7.0 von Font Awesome Icons zum Laufen bringen, indem ich einfach einen Namen (z. B. car) im entsprechenden Bereich von „Header links

[rolando]

Vielen Dank dafür, @Johani. Funktioniert einwandfrei und bietet mir eine „ästhetische

[misterjtc (Jordan Cook)]

Ich habe ebenfalls ein Problem damit, dass mein Symbol nicht angezeigt wird. Ich bin mir nicht sicher, was ich falsch mache. Hier ist, was ich unter den Einstellungen habe:

So sieht es bei mir am Ende aus:

[rolando]

Versuchen Sie es beim Buchsymbol ohne fas-