How i can change the Staff Icon

[Nisutec (Niclas)]

Hallo,
Is it possible to change the staff Icon from Admins and Mods to an other icon ?

[omarfilip]

Check out this topic:

Why can't I edit the moderator group settings like any other new group?

Custom descriptions for automatic groups (admin/moderator/trust levels) will be available soon along with a new groups directory design. I don’t think there’s a reason to not have flair for those groups, there’s just a bit of a complication where flair is currently used to show a user’s primary group, and automatic groups can’t be set as primary groups… so it’s a little more complicated than it seems on the surface. There’s some related discussion about this here: Avatar Flair Image for Staff…

[Nisutec (Niclas)]

Thanks for this information but i will change the shield icon behind the username of an staff member.

[anon48433008]

If this is what you want changed, icon by the username

Add this to the common header

<script type="text/discourse-plugin" version="0.8">
  api.replaceIcon('shield-alt', 'terminal');
</script>

“terminal” is what I chose you replace that with your choice

And also add whatever you chose to the “svg icon subset” in your admin panel

if you get lost likely just search “svg icon subset” here

[Nisutec (Niclas)]

I have added the following code to the header

But now the shield Icon is hidden how i can use a other FA Icon ?

@anon48433008

And also add whatever you chose to the “svg icon subset” in your admin panel

Is it possible to add FA Pro Icons to the “svg icon subset”.

[anon48433008]

@Nisutec

Is it possible to add FA Pro Icons to the “svg icon subset”.

IDK, certainly you’d need to subscribe/pay & likely need to change the script to accommodate having done that

Font Awesome

maybe contact them and ask, please report your findings, not sure its worth the $99 a year but if enough people ask for it maybe Discourse can obtain/add a license ?

until then you can use the free ones

Font Awesome

[Canapin (Coin-coin le Canapin)]

Not sure if that can help, but maybe you can have a look at this:

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

Introducing Font Awesome 5 and SVG icons

See also: We're upgrading our icons to Font Awesome 6! We will shortly merge into master a branch that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG icons instead of an icon font. This is a substantial change, with lots of benefits, and one significant change for developers. Here is a quick rundown of the changes: using SVG icons will provide crisper icons, better for accessibility and easier to customize, see this Github article for more details since…

[Nisutec (Niclas)]

@anon48433008

IDK, certainly you’d need to subscribe/pay & likely need to change the script to accommodate having done that

Ok the first line of my header is for the possibility to use all FA Icons. But at the moment the api probably can’t aceess it.
I will try to make a feature request for that.

thank you all for your help

[Nisutec (Niclas)]

How i can use a custome svg file as Icon
I have uploaded the svg file on the Dark Design.

And i have the following custome header

<script type="text/discourse-plugin" version="0.8">
api.replaceIcon('shield-alt', '$shield-alt-duotone');
</script>

But the Icon is not visible.

[Canapin (Coin-coin le Canapin)]

This it not how it works. $shield-alt-duotone is a variable meant to be used in your custom CSS. The first topic I linked earlier explains how to replace icons with new ones with an SVG file:

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

[Nisutec (Niclas)]

Ok it works thank you.