I am trying to replace the bars icon for opening/closing the sidebar following these instructions Replace Discourse's default SVG icons with custom icons in a theme but I’m not having much luck. I’ve created a spritesheet with the sidebar icon I want to use (blurred out since it’s a pro fontawesome icon) [image] Created a component and uploaded the spritesheet: [image] And used this code (I only want the change on desktop) [image] But I just get no icon: [image] Any ideas? I’m sure I’m missing something small and stupid! Thank you!

If you replace the bars icon with another icon in the default set, does the replacement work? Say, replace it with cog or comment. If that works, then the issue is with your custom SVG symbol code. It probably needs a viewBox attribute. Like this custom icon (for the gifs theme component): [image]

did you try it with lowercase asset filename instead (eg: npn_spritesheet.svg)? because otherwise that looks like it should work (i can easily do it with a v5 icon but i don’t have any v6 pro ones). unless it’s simply because of this: [image] How to use Font Awesome Pro v6? Support We haven’t officially updated to v6 yet… v6 changes some icons, renames many, and removes some… so it’s a decent bit of work to find everything that needs to be updated and replaced. Hopefully it’s something we can get to soon.

[image] Lillian : did you try it with lowercase asset filename instead (eg: npn_spritesheet.svg)? because otherwise that looks like it should work (i can easily do it with a v5 icon but i don’t have any v6 pro ones). Strangely, when I delete that asset and reupload with a lowercase version (I even renamed it to npnassets.svg, I still see the old filename… [image] Lillian : unless it’s simply because of this: Since I downloaded the svg and inserted manually in the spritesheet I don’t think this should be an issue, that’s why I took this route since v5 doesn’t have a sidebar icon. [image] Manuel Kostka: What do you see when you inspect the element left of your site logo? [image]

..you’d need to expand the svg element and all nested elements to see the icon code.

So the icon code from the spritesheet is not rendered. You could still try to change the id of the icon to a name without dash, like npnsidebar. sometimes i encounter issues with variable names in themes for which i can’t figure out the actual cause, but making a small adjustment fixes it. Else you could share the svg file. I saw you pixelated the actual code, but it will be publicly accessible anyways when you use it on your live site (edit: ah, didn’t see it’s from the pro plan..)

Thanks, I tried changing the name to npnsidebar in the spritesheet and the code which allowed me to replace the spritesheet properly as well. But unfortunately it did not help. I can DM you the spritesheet and svg to double check my work. Thanks for your help!

[image] Penar Musaraj: If you replace the bars icon with another icon in the default set, does the replacement work? Say, replace it with cog or comment. i replaced it this way with a default one (the code icon) yesterday and it worked, so i think it is indeed viewBox attribute like you say.

That was it, thank you as always Penar! [image]

Help replacing an icon

Development

manuel (Manuel Kostka) July 31, 2023, 11:14am 3

What do you see when you inspect the <span class="header-sidebar-toggle"> element left of your site logo?

E.g. you don’t have a viewbox declared on the symbol tag, the icon could just be out of view.

Topic		Replies	Views
How to replace an existing SVG icon with a custom one? Development	10	838	March 25, 2021
Use Font-Awesome 4 icons in theme but keep FA5? Development	16	2819	June 18, 2019
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9588	February 24, 2026
Changing icons to Font Awesome Pro Version Feature fontawesome-pro , completed	9	2721	May 9, 2020
Introducing Font Awesome 5 and SVG icons Announcements new-feature	131	45203	December 1, 2023

Help replacing an icon

Related topics