# É possível alterar o ícone para avisos de staff?

**URL:** https://meta.discourse.org/t/is-it-possible-to-change-the-icon-for-staff-notices/271436
**Category:** Development
**Tags:** post-notices
**Created:** [Junho 26, 2021, 5:23pm UTC](https://meta.discourse.org/t/is-it-possible-to-change-the-icon-for-staff-notices/271436 "2021-06-26T17:23:13Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![nawthor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nawthor/32/71115_2.png) [@nawthor](https://meta.discourse.org/u/nawthor)
#### Post date: [Junho 26, 2021, 5:23pm UTC](https://meta.discourse.org/t/is-it-possible-to-change-the-icon-for-staff-notices/271436/1 "2021-06-26T17:23:13Z")

</div>

É possível alterar o ícone usado nos Avisos da Equipe, seja via CSS ou por uma configuração que eu ainda não tenha encontrado? Preferencialmente, gostaríamos de substituí-lo por uma imagem personalizada em vez de um ícone do FA.

---

<div class="post-metadata">

### Author: ![dan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dan/32/101549_2.png) [@dan](https://meta.discourse.org/u/dan)
#### Post date: [Junho 29, 2021, 7:36am UTC](https://meta.discourse.org/t/is-it-possible-to-change-the-icon-for-staff-notices/271436/2 "2021-06-29T07:36:31Z")

</div>

Não temos uma configuração para isso e acredito que fazer apenas com CSS é difícil, mas você pode criar um componente de tema para substituí-lo.

No CSS, você ocultará o ícone antigo:

```css
.post-notice {
  .d-icon-user-shield {
    display: none;
  }
}

```

No JavaScript (você coloca isso na tag `<head>` do componente do tema), você decorará o aviso e adicionará o novo ícone:

```javascript
<script type="text/discourse-plugin" version="0.8">
  const { iconNode } = require("discourse-common/lib/icon-library");
  api.decorateWidget('post-notice:before', helper => {
    return iconNode('heart');
  });
</script>

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/a/4a8bd2d4508a09b17d0c49694e9b4e3608640d41.png)

… ou, se quiser substituir por uma imagem…:

```javascript
<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('post-notice:before', helper => {
    return helper.h('img', {
      src: 'https://www.discourse.org/a/img/home-spot-1.png',
      style: 'margin-right: 0.65em',
      height: 30,
      width: 30
    });
  });
</script>

```

 ![Screenshot 2021-06-29 at 10.35.10](https://global.discourse-cdn.com/meta/original/3X/9/5/959c45bf56f8b1f34de121afaf5a2282ef06ffcf.png)

Com temas e componentes de tema, o céu é o limite. Se quiser saber mais, temos um recurso para isso:

> [@Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648):
>
> Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [Julho 12, 2023, 3:03pm UTC](https://meta.discourse.org/t/is-it-possible-to-change-the-icon-for-staff-notices/271436/3 "2023-07-12T15:03:45Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [Agosto 29, 2025, 8:55am UTC](https://meta.discourse.org/t/is-it-possible-to-change-the-icon-for-staff-notices/271436/4 "2025-08-29T08:55:49Z")

</div>



---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [Agosto 29, 2025, 9:11am UTC](https://meta.discourse.org/t/is-it-possible-to-change-the-icon-for-staff-notices/271436/5 "2025-08-29T09:11:42Z")

</div>

Acabei de experimentar isto; o primeiro trecho de código JS precisou de uma pequena atualização.

Isto agora precisa de ir para o separador JS de um Componente de Tema (ou Tema) em vez disso:

```js
import { apiInitializer } from "discourse/lib/api";
import { iconNode } from "discourse-common/lib/icon-library";

export default apiInitializer("0.11.1", (api) => {
  api.decorateWidget("post-notice:before", () => {
    return iconNode("heart");
  });
});

```

Não olhei para usar uma imagem em vez disso, desculpe.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [Agosto 29, 2025, 10:27am UTC](https://meta.discourse.org/t/is-it-possible-to-change-the-icon-for-staff-notices/271436/6 "2025-08-29T10:27:25Z")

</div>

Depois de adicioná-lo ao meu tema, vi um aviso por causa de [Upcoming post stream changes - How to prepare themes and plugins](https://meta.discourse.org/t/upcoming-post-stream-changes-how-to-prepare-themes-and-plugins/372063?u=moin). Então, estou preocupado que outra atualização seja necessária em breve.

Tentei isso porque estava curioso para saber se isso afetava apenas notas de funcionários ou também notas de usuários novos e retornantes, já que todos são avisos de postagem.  
Afeta todos os avisos de postagem, enquanto o CSS acima apenas oculta o escudo. Assim, você acaba com dois ícones nos avisos de usuários novos e retornantes.

 ![Screenshot_20250829_120059_Firefox](https://global.discourse-cdn.com/meta/original/4X/f/e/c/fecf6ba3ac65c043abfacb616602532c63f1f069.jpeg)

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [Agosto 29, 2025, 10:50am UTC](https://meta.discourse.org/t/is-it-possible-to-change-the-icon-for-staff-notices/271436/7 "2025-08-29T10:50:15Z")

</div>

Isso é tudo um pouco insatisfatório então!!

Na minha pressa para postar isso, eu não percebi que não havia removido o `api.decorateWidget`. Eu devo ter dispensado o erro no meu site sem perceber.

Tenho certeza de que o CSS poderia ser melhor direcionado, mas acabei de descobrir [Quote Callouts](https://meta.discourse.org/t/quote-callouts/350962) - isso atenderá melhor ao meu caso de uso, eu acho.
