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
Schließen Sie FontAwesome 6-Icon-Klassen für jedes in der Liste verwendete Icon ein.
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.
I’m having a similar issue as a few people mentioned above where the icon is not showing, but I can still click the button. I made the edit to the icon setting so that it says (for instance) “fab-facebook-f” rather than just “facebook-f”. For Twitter and my other website, I have no issues, but for Facebook and LinkedIn, it’s still not working.
I figured out Facebook, but still can’t get LinkedIn. Also, is there any way to make a custom icon? Could I upload my company’s logo and use it as an icon?
Ah this resolved it, indeed. Yep - super confusing. Rename would rock!
EDIT: Recent update also seemed to ninja change discord’s class name to include fab- in between it (eg, if you’re wanting to change the icons color; which @OP would make a great native feat - was a bit hard to catch).
but since that icon is not included in the default set of icons that Discourse uses, you will also need to add it to the other setting in the component.
Sure, there’s a section in this topic about adding custom icons.
Once you have that setup, you’ll be able to use any custom icons you add in this theme component. Please have a look there and let me know if you run into any issues.
I’ve made that change along with a couple of other implementation improvements here
The new update adds unique prefixed classes to each link based on the title you use. So, for example if you use
Thank you for your help. I tried using “fab-linkedin” in both the “Header Links” and “Svg Icons” categories. As seen in the picture, it is still not working for whatever reason.
The grey circle is where the LinkedIn logo would be. Any other ideas how to fix it?
Since you are a customer, I went in and had a look at your site and fixed the issue there for you. I updated the theme component and set the correct settings for the icons, they should all work now.
One more question/ request; I initially had these links opening in a separate tab, but now they are opening in the same tab. The setting is already set to “blank”, how else can I change this?
I can get some version 4.7.0 icons from Font Awesome Icons to work just by typing a name (e.g. car) in the correct part of “Header links”. Some icons don’t show (e.g. fa-comments-o). Some don’t need me to use “Svg icons” (e.g. home) and some do (e.g. car).
None of the version 5 icons which I’ve tried from Font Awesome have worked. I’ve put the fa- name into “Header links” and “Svg icons” to no effect. The fab-facebook (etc) icons which were there by default do work though.
many thanks for this @Johani . works like a charm and gives me an “aesthetical” solution for linking “back to the site” (in my case)
i did however, encounter an issue since i am also using the Left side hamburger menu on mobile component which ends up breaking everything on that part of the .d-header
Von uns gehostet? Theme-Komponenten sind in unseren Standard-, Business- und Enterprise-Plänen verfügbar.
