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…

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: [이미지] How to use Font Awesome Pro v6? …

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.

[이미지] 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 …

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

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!

[이미지] 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]

아이콘 교체 방법

개발

Lilly (Lillian ) 7월 31, 2023, 1:07오전 2

대신 소문자 자산 파일명(예: npn_spritesheet.svg)을 사용해 보셨나요?
그렇지 않다면, 동작해야 할 것 같습니다(v5 아이콘으로는 쉽게 할 수 있지만, v6 pro 아이콘이 없기 때문입니다).

아니면, 이것이 단순히 이유일 수도 있습니다:

글		댓글	조회수
How to replace an existing SVG icon with a custom one? Development	10	770	3월 25, 2021
Use Font-Awesome 4 icons in theme but keep FA5? Development	16	2724	6월 18, 2019
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9476	2월 24, 2026
Changing icons to Font Awesome Pro Version Feature fontawesome-pro , completed	9	2675	5월 9, 2020
Introducing Font Awesome 5 and SVG icons Announcements new-feature	131	44539	12월 1, 2023

아이콘 교체 방법

Related topics