Help replacing an icon

[davidkingham]

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)

Created a component and uploaded the spritesheet:

And used this code (I only want the change on desktop)

But I just get no icon:

Any ideas? I’m sure I’m missing something small and stupid! Thank you!

[Lilly (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).

unless it’s simply because of this:

How to use Font Awesome Pro v6?

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.

[manuel (Manuel Kostka)]

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.

[davidkingham]

@Lilly

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…

@Lilly

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.

@manuel

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

[manuel (Manuel Kostka)]

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

[davidkingham]

[manuel (Manuel Kostka)]

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..)

[davidkingham]

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!

[pmusaraj (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.

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):

[Lilly (Lillian)]

@pmusaraj

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.

[davidkingham]

That was it, thank you as always Penar!