I installed a component that only allows me to put icons in my forum tags through the fontawesome website, but I want to use my own icons, how do I upload them and use them?
[image]
AI-generated summary
Using Custom SVG Icons in Custom Header Links Theme Component
danielabc wants to use custom SVG icons in the Custom Header Links theme component instead of relying on Font Awesome icons. pfaffman suggests a possible solution but notes that the theme component might only support Font Awesome icons.
However, keegan reveals that custom icon support was added in a recent update. To use custom icons, navigate to the Icon Header Links component in /admin/customize/themes, update the component if necessary, and configure each icon link with a URL to an image source instead of a Font Awesome icon name.
keegan provides an example of how to set up a link with a custom icon, using a URL from Wikipedia Commons. After updating the theme component, users can use their own SVG icons in the Custom Header Links theme component.
thanks for replying, i was wanting to use this
but for some reason the svg icons i upload on my website i can’t use in that
Oh. I suspect that you’ll need to do a bit of work to make that happen. I changed your title accordingly, so hopefully it’ll get attention from someone who knows more about that theme component.
It says
which I think means that it’s hard or impossible to use other icons.
Adding custom icons is now supported, as of this commit:
https://github.com/discourse/discourse-icon-header-links/pull/8
When adding a header link in the theme setting, paste in a url to an icon and it should be present in the header.
Hi! thank you for answering me and for helping me! How do I install this?
Hi @danielabc
You simply need to navigate to your components in /admin/customize/themes, find the Icon Header Links component. If it’s not on the latest update, you should see a button to update.
After updating the theme component, in your theme settings where you configure each icon link, simply use a URL to an image source instead of a font awesome icon name.
For example, here is how I have a link set up:
Desktop mobile link, https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Pok%C3%A9_Ball_icon.svg/1200px-Pok%C3%A9_Ball_icon.svg.png, https://facebook.com, vdm, self
Which renders like so:
