# Ícone personalizado exclusivo apenas para a página de revisão

**URL:** <https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621>\
**Category:** Development\
**Created:** [Novembro 24, 2022, 7:57am UTC](https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621 "2022-11-24T07:57:57Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [Novembro 30, 2022, 7:31am UTC](https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621/6 "2022-11-30T07:31:58Z")

</div>

Olá,

Eu também escrevo uma solução CSS. 🙂

Isso ocultará o ícone de verificação padrão e adicionará o ícone personalizado a um pseudo `::before`.

1. Crie um novo componente de tema.

2. Carregue o ícone na seção **Uploads** e adicione o **nome da variável SCSS** : `review-approved-icon`  

3. Clique no botão Editar CSS/HTML e cole o seguinte código na seção Common / CSS.

> **Use isso se você quiser usar var(--success) para adicionar cor ao ícone personalizado**
>
> ![Screenshot 2022-11-29 at 21.49.31](https://global.discourse-cdn.com/meta/original/4X/7/8/e/78ec9835ee024c652985fe44f84623e78ad83a61.png)
> 
> ```scss
> .reviewable {
> .status span.approved {
> position: relative;
> &:before {
> content: url($review-approved-icon);
> width: 13px;
> height: 13px;
> top: 0px;
> position: absolute;
> // var(--success) cor do esquema claro #090 (cor do ícone personalizado)
> // você pode calcular um novo filtro de cor clara aqui: https://codepen.io/sosuke/pen/Pjoqqp
> filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%);
> @media (prefers-color-scheme: dark) {
> // var(--success) cor do esquema escuro #1ca551 (cor do ícone personalizado)
> // você pode calcular um novo filtro escuro aqui: https://codepen.io/sosuke/pen/Pjoqqp
> filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%);
> }
> }
> .d-icon {
> visibility: hidden;
> }
> }
> }
> 
> ```

* * *

> **Use isso se o seu ícone tiver a cor que você deseja usar**
>
> ```scss
> .reviewable {
> .status span.approved {
> position: relative;
> &:before {
> content: url($review-approved-icon);
> width: 13px;
> height: 13px;
> top: 0px;
> position: absolute;
> }
> .d-icon {
> visibility: hidden;
> }
> }
> }
> 
> ```

* * *

> **Use isso se você quiser usar um ícone diferente nos esquemas de cores claro e escuro**
>
> Se você escolher esta opção, terá que carregar dois ícones diferentes com cores diferentes.
> 
> **Nome da variável SCSS** : `review-approved-icon-light` e `review-approved-icon-dark`
> 
> ![Screenshot 2022-11-30 at 8.25.06](https://global.discourse-cdn.com/meta/original/4X/b/9/a/b9a7bf6a16c7377bede7387c5cc40c8cab46a472.png)
> 
> ```scss
> .reviewable {
> .status span.approved {
> position: relative;
> &:before {
> content: url($review-approved-icon-light);
> @media (prefers-color-scheme: dark) {
> content: url($review-approved-icon-dark);
> }
> width: 13px;
> height: 13px;
> top: 0px;
> position: absolute;
> }
> .d-icon {
> visibility: hidden;
> }
> }
> }
> 
> ```

* * *

 ![Screenshot 2022-11-29 at 21.38.55](https://global.discourse-cdn.com/meta/original/4X/6/0/0/60064b0b1f81c5b8b62c3368033ad7a543925f83.png)

---

_[View the full topic](https://meta.discourse.org/t/unique-custom-icon-for-review-page-only/246621)._