Custom header links (icons)

My reply below was to a now-deleted post which contained the following. I’m still interested in FA5 icons myself…

Can we still add icons using this plugin?, asking because its not working anymore. I have to add Facebook, Twitter & Instagram.

There is no option for SVG icon here: [screenshot]

Did it work for you before, what changed, and what have you tried?

Have you maybe downloaded the non-icon version of this plugin?

I was able to get Font Awesome 4 icons to work, but not Font Awesome 5 (except the 2-3 built-in ones): see my post above.

Yes, I actually downloaded the non-icon version, I realized this after some research. It is working now with discourse-icon-header-links.

That’s great. Could you possibly share the settings you used? I’d like to try them to see what I was getting wrong. Thanks.

Sure here it is:- Screenshot by Lightshot

Facebook, fab-facebook, https://www.facebook.com/, vdo, blank
Twitter, fab-twitter, https://www.twitter.com/, vdo, blank
Instagram, fab-instagram, https://www.instagram.com/, vdo, blank

Let me know if it helps :slight_smile:

1 Like

Thank you very much. These are the three built-in ones, which worked for me too.

Could you possibly try other FA5 icons and let me know how it goes?

I tried LinkedIn and it works: Screenshot by Lightshot

If you are adding any FA5 icon then make sure to Include FontAwesome 5 icon classes for each icon used in the list in the SVG icons section here: Screenshot by Lightshot

Thanks!

1 Like

I really appreciate this. Does it work with non fab- icons too?

No, it didn’t work without fab-

I think this may be wrong, though apologies in advance if not…

For example, to use the address card icon at Font Awesome you need to change far fa-address-card to far-address-card (and add that to the svg icon subset setting). Simply using it without the fa- does not work.

I only realised this after looking at https://github.com/discourse/discourse/pull/6557/commits/bf3f958cdd516d09136bee33e3d51b36c05dcbfe and https://github.com/discourse/discourse/pull/6557/commits/bf3f958cdd516d09136bee33e3d51b36c05dcbfe

1 Like

is there a way to remove existing header links ?

I managed to install
Now I want to put this icon Font Awesome with the link to the vehicle category
I made this:
Mobile desktop link, fas-rocket, c / vehiculos / 69, vdm, blank
And down I put
fas-rocket

But the icon cannot be seen, how do I upload the icon?

Try with just “rocket”.

This guess is just based on searching https://github.com/discourse/discourse/pull/6557/commits/bf3f958cdd516d09136bee33e3d51b36c05dcbfe for the word “rocket”.

3 Likes

Thanks, do you know if this icon is available?

i think i’m going to have to add it manually. A little difficult for me
Would it be this way?

In plugins : simply include an SVG sprite file in the plugins/your-plugin-name/svg-icons folder. Restart your server (if in dev) or rebuild the site if in a Docker container and your custom icons should be automatically available .

Could someone give me a summary of how to add the mask icon in a forum that has digital ocean and does not know anything? Thank you

I’ve just tested it on my forum by changing one of my icons temporarily. The icon works if you call it “rocket” (without the quotation marks) in header links. If it doesn’t work maybe there is a problem with the rest of your line. There is no need to add it to svg icons.

1 Like

Yes, thank you very much, the rocket worked perfectly. But now I want to add this:

theater-masks-solid

Apologies. I had wrongly assumed you still meant the original icon. The theatre icon isn’t mentioned in the code so won’t work.

I went round the houses trying to add FA5 icons but couldn’t. None of the suggestions here worked for me.

Nothing I put in svg icons made any difference. Notably the Instagram one mentioned in a relatively recent post appears in the code so I think works because of that (not because it was added to svg icons).

1 Like

I received the following security report for this component; can I configure it to use the rel="noreferer, noopener" code?

1 Like

After updating to the latest version of discourse, the icons are no longer displayed. What could be the problem ?

2 Likes

We’ve added this to our instance and it’s fantastic, thank you so much for this plugin!

Would it be possible to have a setting to add some white space between the new icons and the existing, default ones? I can fake it by adding in ,,,,, but that defaulst to linking to the theme settings page, but the look is what we’d like;
Screen Shot 2021-05-20 at 13.22.40

3 Likes

That’s great to hear :+1:

Sure, I just added that here (default off)

Remove the empty setting from your setting, update the component and toggle the new setting and it should start working after a page refresh.

5 Likes