So I posted this question in a thread about the component that changes the Like Icon to a thumbs up. Sorry to dredge up this topic again but I am totally confused. What I’d like to do is use a custom Like icon from here - Font Awesome with the outline version being the Unliked icon. Is that possi…

Ok, try using this: Dropbox - discourse-custom-icons.zip - Simplify your life I only added the replaceIcon call for d-liked, you’ll have to edit the component in your instance and add the other lines. Make sure you use the IDs in the svg file, now they are simply SVGpig and SVGpigout.

I’m not expert at that stuff… [صورة] Phlipups: Since it’s a Pro icon, Maybe see Discourse FontAwesome Pro Plugin

[صورة] Phlipups: In the SVG icon subset I added fa-pig and fal-pig but when previewed the like icon is blank. I assume that’s because I don’t actually have the Pig icon installed. So I tried the piggy-bank icon which is supposed to be free and added that to Icon subset, again the Like icon is bl…

So I tried again and added the ‘piggy-bank’ icon to the SVG Icon subset. I added the JS into the Header again and referenced ‘Piggy-Bank’ and it finally worked properly! Thx! Now the only problem with that particular icon is that both liked posts and unliked posts look exactly the same, there is…

[صورة] Phlipups: Now the only problem with that particular icon is that both liked posts and unliked posts look exactly the same, there is no outline version for unliked posts Did you add both of them? (I haven’t done what you’re doing, so this also may not help). There is a theme component t…

Ok, so I’ve tried some things to create my own. Unfortunately, the link to see an example of how the SVG Sprites file should be formatted inthe OP is just a blank page, it doesn’t load. So I winged it. I created both my SVGs in Illustrator, exported, then threw them into Chrome to ‘Inspect eleme…

You shouldn’t add icons-sprite twice. Can you post the SVG paths in a code block? I think you’re running into issues putting the icons in a sprite, I can help with that.

Thanks! Is this what you’re looking for? <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <symbol id=“ids-SVGpig” width="616px” height="425px” viewBox="0 0 616 425"> <path xmlns="http://www.w3.org/200…

Discourse Gifs ships a custom GIF icon that you can use as an example: assets/gif.svg?short_path=61c0681 main <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="discourse-gifs-gif" viewBox="0 0 1024 1024"> …

Awesome! Thank you, that worked I got it up and running. My community appreciates it. Thanks so much!! [Screen Shot 2021-03-25 at 12.29.27 PM]

كيفية استبدال أيقونة SVG موجودة بأيقونة مخصصة؟

مطور

pfaffman (Jay Pfaffman) 15 مارس 2021، 1:55ص 2

أنا لست خبيرًا في هذه الأمور…

ربما يمكنك الاطلاع على Discourse FontAwesome Pro

الموضوع		الردود	مرات العرض
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	8865	24 فبراير 2026
Introducing Font Awesome 5 and SVG icons Announcements new-feature	135	42691	1 ديسمبر 2023
How to use a custom SVG like icon in the Reactions plugin? Support reactions	3	795	2 يونيو 2023
Change the Like Icon to :+1: Theme component official , change-like-icon	6	14142	27 فبراير 2024
Change icons globally Developer Guides how-to	26	9641	5 أكتوبر 2025

كيفية استبدال أيقونة SVG موجودة بأيقونة مخصصة؟

الموضوعات ذات الصلة