Hi, I’m trying to change the “Featured” article flame icon in Casper.
I’ve downloaded a .svg file from Font Awesome which I then edited and saved as .hbs document.
I gave it a unique name and stored it in partials/icons folder.
Unfortunately my website breaks when I edit the icon name in post.hbs so I must do something wrong.
I couldn’t find any documentation about this; what’s the best way to change built-in icons?
Thanks.
It sounds like you’re on the right track!
The line you’d need to update to change out the icon would be this one in post-card.hbs:
Thanks for your help.
Yes, that’s what I did, I’ve replaced {{> "icons/fire"}} by {{> "icons/pin"}} (name of the new icon).
This where the website breaks. The issue happens whether I edit post-cards.hbs or post.hbs.
As far as the new icon file is concerned, the content reads like this:
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32 32C32 14.3 46.3 0 64 0H320c17.7 0 32 14.3 32 32s-14.3 32-32 32H290.5l11.4 148.2c36.7 19.9 65.7 53.2 79.5 94.7l1 3c3.3 9.8 1.6 20.5-4.4 28.8s-15.7 13.3-26 13.3H32c-10.3 0-19.9-4.9-26-13.3s-7.7-19.1-4.4-28.8l1-3c13.8-41.5 42.8-74.8 79.5-94.7L93.5 64H64C46.3 64 32 49.7 32 32zM160 384h64v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384z"/>
</svg>
How does it break? How are you adding the new theme file?
I’m working on the theme locally; this is the only occurrence of something going wrong.
Basically my logo gets super huge and everything else is all over the place.
I think it might be the SVG. Which icon from Font Awesome were you trying to use?
I thought about it but I’ve tested three different icons and I’m having the same issue each time.
This is the one I’m trying to use.
Like I said, I must do something wrong 
Is there something specific to do with the .svg file besides making it a .hbs file?
Another thing I’ve noticed, my new icon file is .handlebars and not .hbs.
Seems to be working OK for me. I think the way you edited the SVG file is likely the culprit.
You want to make your file pin.hbs. Then, this is what the SVG should look like:
<svg viewBox="0 0 576 512" width="16" height="17" fill="currentColor"><path d="m287.9 0c9.2 0 17.6 5.25 21.6 13.52l68.6 141.28 153.3 22.7c9 1.3 16.4 7.6 19.3 16.2 2.8 8.7.5 18.2-5.9 24.5l-111.2 110.2 26.3 155.5c1.5 9-2.2 18.2-9.7 23.5-7.4 5.3-18.1 6-25.3 1.7l-137-73.2-137.8 73.2c-7.2 4.3-17 3.6-24.5-1.7-7.4-5.3-11.1-14.5-10.5-23.5l27.1-155.5-111.09-110.2c-6.46-6.3-8.75-15.8-5.91-24.5 2.83-8.6 10.3-14.9 19.29-16.2l153.21-22.7 68.6-141.28c4.1-8.271 12.4-13.52 21.6-13.52zm0 78.95-52.5 108.25c-3.5 7.1-10.3 12.1-18.1 13.3l-118.32 17.4 85.92 85.1c5.5 5.5 8 13.4 6.7 21.1l-20.2 119.6 105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2-20.2-119.6c-1.3-7.7 1.3-15.6 6.8-21.1l85.9-85.1-118.3-17.4c-7.9-1.2-14.7-6.2-18.1-13.3z"/></svg>
Let me know how it goes.
It worked! The content of my new icon file was correct (at least I got that part right).
But I’m using Visual Studio Code and I could only save it as a .handlebars file, not a .hbs file.
I ended up duplicating an existing icon from the partials/icons folder and I replaced its content.
Thanks a lot for your precious help!
Awesome! Glad you got it sorted.
I use VS Code every day. You definitely can save a file as .hbs.