De texto para ícone

[Radu]

Como posso substituir o texto da captura de tela por qualquer outro ícone SVG (qualquer um) usando apenas CSS?

Muito apreciado!

[NateDhaliwal]

Você precisará primeiro carregar seu arquivo SVG na seção Uploads. Para o nome da variável SCSS, faça algo curto e conciso.
Em seguida, adicione este trecho à guia Common:

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

Observe que você não deve colocar aspas dentro dos parênteses do url.

[Canapin (Coin-coin le Canapin)]

Don criou uma ferramenta auxiliar para usar ícones em 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]

Desculpe, não entendi. O que você quer dizer com $name-of-variable? Estou tentando adicionar um código SVG depois de content:, e não está funcionando.

[Radu]

Muito apreciado @Canapin, mas não estou procurando instalar mais componentes para mudar a palavra “replies” com um código SVG.

[NateDhaliwal]

O nome da variável é o que você inseriu ao carregar o arquivo SVG.

Você precisará ser um administrador para fazer isso.

---

1. Vá para /admin no fórum.
2. Na barra lateral, escolha Componentes na seção Personalizações e crie um novo.
3. Carregue o arquivo SVG em Uploads na parte inferior da página do componente.
4. Escolha um nome para a variável (no modal de upload de arquivo)
5. Use o código na minha postagem:

@NateDhaliwal

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

6. Substitua name-of-variable pelo nome que você escolheu na Etapa 4. Mantenha o $ antes do nome da variável.
7. Pronto!

[Radu]

Muito obrigado, ficou muito claro agora.

Uma pergunta rápida: se eu tiver, digamos, 10 ícones, preciso fazer o upload um por um?

[NateDhaliwal]

Sim, eu acredito que sim.

[NateDhaliwal]

@Radu Caso meu guia não funcione, você pode seguir este guia, onde acredito que você pode fazer upload de apenas 1 arquivo para vários ícones:

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]

Este foi um ótimo post e me ajudou a substituir os ícones padrão. Mais uma coisa, se me permite…

No seguinte, como posso colocar um ícone FontAwesome dentro de content?

th.topic-list-data.posts.num > span {
    visibility: hidden;
}

th.topic-list-data.posts.num > span:after {
    content:'um Ícone FontAwesome aqui';
    visibility: visible;
    display: inline-block;
    padding-bottom: 1.2em;
}

[NateDhaliwal]

Você pode baixá-lo como um SVG e depois fazer a mesma coisa. Caso contrário, você terá que criar um componente, o que será mais complexo.

[Radu]

Então não há como fazer algo assim?

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

Se não, como ficaria o código para o seguinte método? Só preciso de um exemplo para começar, pois tentei CSS básico e não tive nenhum efeito.

@NateDhaliwal

Você pode baixá-lo como um SVG e fazer a mesma coisa.

Agradeço desde já!

[NateDhaliwal]

@Radu

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

Não, mas você pode usar o mesmo método que usou com métodos anteriores. Faça o upload, depois adicione-o como um arquivo SVG que você seguiu usando o guia;

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

Se não, como ficaria o código para o seguinte método? Só preciso de um exemplo para começar, pois tentei CSS básico e não tive nenhum efeito.

Não tenho muita certeza de onde você quer colocar o ícone. Você poderia enviar uma captura de tela?
Obrigado.

[Radu]

Não importa onde, eu só quero colocar um ícone FA dentro da linha content:'...'

Acho que vou usar o FA como família de fontes e Unicodes dentro do método content.

[NateDhaliwal]

Você poderia fazer isso:

@NateDhaliwal

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

Não tenho 100% de certeza se isso funciona, mas tenho bastante certeza de que funciona.