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: [image] 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: [image] Discourse Easy 'SVG Icon' and 'Emoji' in CSS Dev Hello wave This topic contain two theme component. Discourse Easy SVG Icon CSS warning This theme component is functional as a template, please fork it o…

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. [image] Nate Dhaliwal: You can download it as a SVG …

From text to icon

Support

Canapin (Coin-coin le Canapin) January 7, 2025, 1:04am 3

Don made a helper tool for using icons in CSS:

Topic		Replies	Views
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	8863	February 24, 2026
Font Awesome in text Support	1	109	January 20, 2025
Use Font-Awesome 4 icons in theme but keep FA5? Development	16	2451	June 18, 2019
How to replace an existing SVG icon with a custom one? Development	11	543	September 4, 2023
Discourse Easy 'SVG Icon' and 'Emoji' in CSS Development	11	736	March 27, 2024

From text to icon

Related topics