Sim, desculpe, eu deveria ter atualizado minha postagem. Eu descobri que, com o Font Awesome, era necessário adicioná-los ao Setup.
E recentemente aprendi, como você disse, que preciso criar um arquivo de sprite SVG para fazer upload em icons-sprites.
Ainda estou aprendendo muitas coisas novas. Agradeço a ajuda para evoluir meu conhecimento. Obrigado
Os ícones de categoria do nosso site sempre ficaram ótimos, até que eu fiz login hoje. Parece que não há espaçamento entre o ícone e o título da categoria quando exibido. Alguém mais está enfrentando esse problema?
Exemplo…
Estou vendo isso também. Tenho certeza de que o Penar vai corrigir, mas por enquanto isso resolverá:
.select-kit .select-kit-header .selected-name .name .d-icon {
margin-right: .25em;
}
Obrigado a ambos, isso deve estar corrigido agora.
É possível usar outros ícones além do Font Awesome? Meu fórum é sobre viagens e preciso de ícones muito específicos que não existem lá. Podemos usar, por exemplo, um arquivo de ícone PNG comum, como fazemos com as categorias? Obrigado!
Você pode usar ícones personalizados se os converter para SVGs e adicioná-los ao seu tema por meio de um sprite SVG. Consulte a seção “Criar um spritesheet SVG” deste guia (Replace Discourse's default SVG icons with custom icons in a theme) para saber como adicionar ícones personalizados ao seu site, que você poderá usar neste componente (e em todo o seu site Discourse).
Funciona muito bem!
É possível eu ajustá-lo para que o ícone apareça após o título da categoria?
Pergunta bônus: é possível adicionar um tooltip/texto alternativo?
(Background: Estou escondendo o ícone de cadeado e, em vez disso, estou usando este componente para adicionar um ícone às poucas categorias públicas que tenho. E gostaria que os usuários tivessem uma maneira de descobrir o que o símbolo representa.)
Estou com dificuldades para usar meus ícones personalizados. Não encontrei nada que indicasse se devo ou não usar um prefixo. É isso que estou fazendo.
Aqui está o SVG que estou usando - https://andronixforumupload.ams3.digitaloceanspaces.com/original/1X/bdabc28a604dc98bb25ce8af2ef6f8dc7c9f2626.svg
Como você pode ver, não consigo ver o ícone do Arch de forma alguma.
icons-sprite:
my-icon na minha planilha, escrevo assim:Resultado:
@Canapin Isso não funciona. Aqui está meu arquivo de sprite - Arquivo de Sprite
O ID da imagem que estou tentando - Aqui
Veja o que estou fazendo -
Estou fazendo algo errado?
No seu spritesheet, tente substituir:
<svg width="0" height="0" class="hidden">
Por:
<svg xmlns="http://www.w3.org/2000/svg">
Além disso, não há necessidade de adicionar o ID do ícone nos campos de configuração de ícones SVG. Todos os seus ícones personalizados já estão disponíveis a partir do seu spritesheet enviado.
Acredito que a configuração ícones SVG seja destinada a carregar ícones adicionais do Font Awesome, pois o Discourse carrega apenas um conjunto definido e pequeno por padrão.
@Canapin Obrigado! Funcionou perfeitamente. Tenho mais uma pergunta: esse arquivo de sprite é exclusivo de um componente específico ou posso acessar os ícones pelos seus IDs em qualquer lugar?
Ao fazer upload de um arquivo para um tema usado ou um componente de tema, você pode utilizá-lo em qualquer outro, então imagino que possa usar seus IDs de ícone em qualquer lugar.
Ei, Penar, isso vai suportar o novo plugin Font Awesome Pro? Ou existe alguma maneira de usá-lo já que estou perdendo? Obrigado!
Deve funcionar com o plugin Pro, sim. Você está vendo SVGs não-Pro apenas para os ícones de categoria?
Sim, após remover meu sprite, apenas os não-pro são exibidos. Além disso, os não-pro não seguem a configuração fa_icon_style para ícones claros, etc.
Hmm, isso funciona bem no meu site local.
Esse é o ícone de engrenagem, usando o plugin com o estilo “Light” selecionado. Compare com o estilo regular abaixo.
Mas talvez eu não esteja verificando a coisa certa… me avise se houver algum ícone específico que não esteja sendo exibido corretamente para você.
Aqui está um exemplo com o tema definido como claro. Críticas de Imagem tem o ícone comment-alt-edit e não é exibido (que é um ícone Pro), Showcase de Imagens tem o ícone images, que não é Pro, mas está exibindo a versão regular, não a clara. Discussões está mostrando a versão sólida de comments, e Comunidade está mostrando a versão clara de users, conforme esperado.
Tentei alterar um deles para cog, e funciona conforme o esperado com a versão clara adequada. Há muitas estranhezas acontecendo aqui!
Você tentou com far-comment-alt-edit?
Ok, entendi agora. A chave é ter far- na lista de ícones de categoria, não em ícones svg. Então, para ícones claros, preciso mudar todos para fal- e isso não segue a configuração do site para estilo de ícone fa, certo?
