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 d…

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 templat…

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 …

От текста к иконке

Поддержка

Canapin (Coin-coin le Canapin) 07.Январь.2025 01:04:39 3

Дон создал вспомогательный инструмент для использования иконок в CSS:

Тема		Ответов	Просм.
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9072	24.02.2026
Font Awesome in text Support	1	146	20.01.2025
Use Font-Awesome 4 icons in theme but keep FA5? Development	16	2544	18.06.2019
How to replace an existing SVG icon with a custom one? Development	10	603	25.03.2021
Discourse Easy 'SVG Icon' and 'Emoji' in CSS Development	11	815	27.03.2024

От текста к иконке

Связанные темы