From text to icon

[Radu]

How can I replace the text from the screenshot with any other svg icon (any) using only CSS?

Much appreciated!

[NateDhaliwal]

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 parentheses.

[Canapin (Coin-coin le Canapin)]

Don made a helper tool for using icons in CSS:

Discourse Easy 'SVG Icon' and 'Emoji' in CSS

Hello This topic contain two theme component. Discourse Easy SVG Icon CSS This theme component is functional as a template, please fork it on Github or use the code to your project. You can remove the icons svg codes from the SCSS and only keep those what you really actually use… I have imported the mixin file to the common.scss file so you can add your code below that line or separately to the desktop or mobile section. The theme component add the ability to keep the SVG…

[Radu]

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.

[Radu]

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

[NateDhaliwal]

The variable name is the one you entered when you uploaded the SVG file.

You will need to be an Admin to do this.

---

1. Go to /admin on the forum.
2. In the sidebar, choose Components under the Customizations section and make a new one.
3. Upload the SVG file under Uploads at the bottom of the component’s page.
4. Choose a name for the variable (in the upload file modal)
5. Use the code in my post:

@NateDhaliwal

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

6. Replace name-of-variable with the name you chose in Step 4. Keep the $ before the variable name.
7. You’re good to go!

[Radu]

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?

[NateDhaliwal]

Yes, I believe you do.

[NateDhaliwal]

@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

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[Radu]

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 Icon here'; 
    visibility: visible;
    display: inline-block;
    padding-bottom: 1.2em;
}

[NateDhaliwal]

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.

[Radu]

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.

@NateDhaliwal

You can download it as a SVG and then do the same thing.

Kindly appreciated!

[NateDhaliwal]

@Radu

content:'fa d-icon d-icon-reply';

No, but you can use the same method as you did with previous methods. Upload it, then add it as an SVG file you followed using the guide;

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[NateDhaliwal]

@Radu

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.

I’m not too sure where you want to place the icon. Could you send a screenshot?
Thanks.

[Radu]

It doesn’t matter where, I just want to place a FA icon inside the line content:'...'

I think I will go with the FA as a font family and Unicodes inside the content method.

[NateDhaliwal]

You could do this:

@NateDhaliwal

th.posts.sortable.num.topic-list-data {
  content: url($name-of-variable);
}

I’m not 100% sure if this works, but I’m quite sure it does.