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 Development Hello wave This topic contain two theme component. Discourse Easy SVG Icon CSS warning This theme component is functional as a template, ple…

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 …

De texte à icône

Soutien

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

Don a créé un outil d’aide pour utiliser des icônes en CSS :

Sujet		Réponses	Vues
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9072	Février 24, 2026
Font Awesome in text Support	1	146	Janvier 20, 2025
Use Font-Awesome 4 icons in theme but keep FA5? Development	16	2544	Juin 18, 2019
How to replace an existing SVG icon with a custom one? Development	10	603	Mars 25, 2021
Discourse Easy 'SVG Icon' and 'Emoji' in CSS Development	11	815	Mars 27, 2024

De texte à icône

Sujets connexes