This component includes a theme setting that allows you to add as many links as you want, determine their icons, and decide which devices they show up on!
Name
Descriptions
header links
List of links with the following properties: title, icon, URL, view and target
add whitespace
If checked, this will add some whitespace between the default Discourse header icons and the custom icons added via this component
Svg icons
Include FontAwesome 6 icon classes for each icon used in the list.
Icons can be any FontAwesome 6 (free) icon name without the fa- āfab-ā āfas-ā or āfar-ā parts or an URL to an image.
If the icon you want to use does not show up, then add it to the svg_icons setting in the component. If you add new icons, they need to be prefixed with FontAwesome 6 prefixes like fab, far and fas.
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).
For Linkedin you can use fab-linkedin as the icon name in this setting
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
