How can I replace the text from the screenshot with any other svg icon (any) using only CSS? [Screenshot 2025-01-06 181016] Much appreciated! :stuck_out_tongue_closed_eyes:

@Radu In the event my guide doesn’t work, you can follow this guide, where I believe you can just upload 1 file for multiple icons: [صورة] Replace Discourse's default SVG icons with custom icons in a theme Developer Guides You can replace a Discourse’s default …

You’ll need to first upload your SVG file in the Uploads section. For the SCSS variable name, do something short and succint. Then, add this bit to the Common tab: th.posts.sortable.num.topic-list-data { content: url($name-of-variable); } Note that you should not put quotes inside of the url pa…

Don made a helper tool for using icons in CSS: [صورة] Discourse Easy 'SVG Icon' and 'Emoji' in CSS Development Hello wave This topic contain two theme component. Discourse Easy SVG Icon CSS warning This theme component is functional as a template, plea…

I’m sorry, I don’t get it. What do you mean with $name-of-variable? I’m trying to add a SVG code after content:, and it’s not working. :ok_man:

Much appreciated @Canapin , but I’m not looking into installing more components in order to change the word “replies” with an SVG code. :smiley:

The variable name is the one you entered when you uploaded the SVG file. :warning: You will need to be an Admin to do this. Go to /admin on the forum. In the sidebar, choose Components under the Customizations section and make a new one. Upload the SVG file under Uploads at the bottom of the c…

Thank you so much, It’s very clear now. Quick question: If I have let’s say 10 icons, do I need to upload the icons one by one?

This was a great post and it helped me to replace the default icons. One more thing if I may… In the following, how can I put a FontAwsome icon inside content? th.topic-list-data.posts.num > span { visibility: hidden; } th.topic-list-data.posts.num > span:after { content:'a FontAwesome Ic…

You can download it as a SVG and then do the same thing. Otherwise, you’ll have to make a component, which will be more complex.

So there is no way of doing something like this? content:'fa d-icon d-icon-reply'; If not, how would the code look like for the following method? I just need an example from where to start, because I tried basic css and there is no effect. [صورة] Nate Dhaliwal: You can download it as a SVG a…

من النص إلى الرمز

الدعم

NateDhaliwal (Nate Dhaliwal) 13 يناير 2025، 11:12م 13

لا، ولكن يمكنك استخدام نفس الطريقة التي استخدمتها مع الطرق السابقة. قم بتحميله، ثم أضفه كملف SVG اتبعته باستخدام الدليل؛

الموضوع		الردود	مرات العرض
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9004	24 فبراير 2026
Font Awesome in text Support	1	129	20 يناير 2025
Use Font-Awesome 4 icons in theme but keep FA5? Development	16	2526	18 يونيو 2019
How to replace an existing SVG icon with a custom one? Development	10	589	25 مارس 2021
Discourse Easy 'SVG Icon' and 'Emoji' in CSS Development	11	789	27 مارس 2024

من النص إلى الرمز

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