Pergunta sobre os Blocos Gutenberg do Kadence Blocks – Recursos do WordPress Page Builder: Ícones de guia personalizados?

Um usuário perguntou ?

Olá,

É possível adicionar ícones personalizados às guias, em vez de escolher os pré-existentes? Encontrei informações no changelog do plug-in que sugeriam que poderia haver um filtro que eu poderia usar, mas não consegui encontrá-lo. E um artigo informativo também, mas as instruções parecem datadas. Alguém poderia me orientar na direção certa?

Obrigado,

Tim

(@britner)

10 meses, 1 semana atrás

Oi Tim, A versão pro para isso tem uma interface onde você pode usar ícones personalizados gerados a partir do icomoon (o icomoon permite fazer upload de svgs personalizados ou selecionar qualquer um dos ícones suportados e é gratuito).

Não há recurso na versão gratuita para gerenciar isso para você.

Javascript contém um filtro para filtrar as informações svg (é isso que a versão pro se conecta).

Você pode filtrar os nomes dos ícones por kadence.icon_options_names

E conteúdo svg personalizado via kadence.icon_options

Eu não publiquei nenhum documento ou amostra neste momento.

Você pode ler sobre filtros JavaScript aqui:

Espero que isso ajude.

lançador de tópicos

(@timstl)

10 meses, 1 semana atrás

Obrigado. Vou verificar a versão pro neste, mas sei que esses filtros também estão lá.

lançador de tópicos

(@timstl)

10 meses, 1 semana atrás

Marquei isso como solução porque a versão Pro só tem o que preciso, mas encontrei um problema com o qual estou tendo dificuldade:

Após gerar os arquivos no Icomoon, fiz o upload do arquivo selection.json. Os ícones aparecem no gerenciador e podem ser selecionados para títulos de guias. Eu adicionei guias a eles e eles são exibidos no administrador conforme o esperado.

No front-end, os caminhos para esses ícones são removidos, deixando apenas um rótulo vazio. ser visto.

<svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="14" width="14" fill="currentColor" xmlns="

A seleção é .json:

{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M512 121.6c74.227 0 134.4 60.173 134.4 134.4s-60.173 134.4-134.4 134.4c-74.227 0-134.4-60.173-134.4-134.4v0c0-74.227 60.173-134.4 134.4-134.4v0zM512 697.6c190.080 0 390.4 93.44 390.4 134.4v70.4h-780.8v-70.4c0-40.96 200.32-134.4 390.4-134.4zM512 0c-141.385 0-256 114.615-256 256s114.615 256 256 256c141.385 0 256-114.615 256-256v0c0-141.385-114.615-256-256-256v0zM512 576c-170.88 0-512 85.76-512 256v192h1024v-192c0-170.24-341.12-256-512-256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["icon-by-firm"]},"attrs":[{}],"properties":{"order":2,"id":1,"name":"icon-by-firm","prevSize":32,"code":59648},"setIdx":0,"setId":0,"iconIdx":0},{"icon":{"paths":["M153.718 1024c-84.824 0-153.587-68.763-153.587-153.587s68.763-153.587 153.587-153.587v-0c4.353 0 9.011 0.218 13.408 0.609l165.080-275.22c-15.623-23.653-24.923-52.677-24.923-83.872 0-84.824 68.763-153.587 153.587-153.587s153.587 68.763 153.587 153.587c0 31.195-9.3 60.219-25.28 84.448l0.357-0.576 164.949 275.177q6.704-0.609 13.408-0.609c3.439 0 6.791 0 10.143 0.348l272.478-476.955c-16.719-24.227-26.705-54.22-26.705-86.545 0-84.824 68.763-153.587 153.587-153.587s153.587 68.763 153.587 153.587c0 84.824-68.763 153.587-153.587 153.587-0.009 0-0.017-0-0.026-0l0.001 0c-3.439 0-6.791 0-10.143-0.392l-272.39 476.999c16.734 24.235 26.73 54.241 26.73 86.581 0 84.824-68.763 153.587-153.587 153.587s-153.587-68.763-153.587-153.587c0-31.181 9.292-60.192 25.258-84.415l-0.357 0.577-165.080-275.177c-4.353 0.392-8.707 0.609-13.408 0.609s-9.011-0.218-13.408-0.609l-165.123 275.177c15.635 23.656 24.943 52.686 24.943 83.889 0 84.784-68.718 153.517-153.495 153.543l-0.002 0z"],"attrs":[{"fill":"rgb(110, 111, 114)"}],"width":1331,"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["icon-by-product"]},"attrs":[{"fill":"rgb(110, 111, 114)"}],"properties":{"order":3,"id":0,"name":"icon-by-product","prevSize":32,"code":59649},"setIdx":0,"setId":0,"iconIdx":1}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon"},"historySize":50,"showCodes":true,"gridSize":16}}

Alguma ideia do que posso mudar para fazer isso funcionar?

Obrigado,

Tim

(@britner)

10 meses, 1 semana atrás

Você é um multisite? Nesse caso, você precisará instalar este plugin para que o WordPress não remova seu conteúdo svg devido a alguns filtros HTML desatualizados (os tickets estão abertos e esperamos que isso seja corrigido em algum momento)

MU não filtrada

lançador de tópicos

(@timstl)

10 meses, 1 semana atrás

Não, não em vários lugares.

Ícones não personalizados são carregados corretamente nas guias.

Estou usando outros SVGs do site no meu tema, mas todos são carregados por funções PHP em ACF Blocks ou embutidos diretamente em meus templates.

(@britner)

10 meses, 1 semana atrás

Entendo, esta é a minha pergunta, um bug nas guias. Um ícone funciona em outros lugares. Vou atualizar hoje.

Ben

lançador de tópicos

(@timstl)

10 meses, 1 semana atrás

Olá ben,

Instalei a atualização disponível para o Pro, tentei recarregar o arquivo de ícone e tentei editar e reinserir as guias. Eu continuo vendo a mesma pergunta: há mais alguma coisa que eu preciso fazer?

Obrigado,

Tim

(@britner)

10 meses, 1 semana atrás

Desculpe a demora, eu lancei a atualização 1.8.0 hoje. Isso corrigirá o problema da guia.

Ben

lançador de tópicos

(@timstl)

10 meses, 1 semana atrás

Funcionou, obrigado pela rápida solução.

Tim

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *