Como alterar o tamanho do ícone em um elemento de botão usando código personalizado

Em alguns layouts, você pode querer ajustar o tamanho do ícone para que ele combine melhor com o texto do botão ou com o design geral. Atualmente, o tamanho do ícone dentro de um elemento Button não pode ser ajustado diretamente pelas opções de estilo integradas. Para personalizar o tamanho do ícone, você pode usar um pequeno trecho de CSS nas configurações do elemento.

Este guia orienta você em cada etapa para aplicar a alteração corretamente.

Sobre layouts de botões com ícones

O Elemento de botão O GemPages suporta diferentes layouts dependendo de como você o configura.

Existem dois layouts de botões comuns:

• Botão sem ícone: Este layout contém apenas texto e não inclui nenhum ícone.
• Botão com ícone: Este layout inclui um ícone posicionado antes do texto do botãoOs ícones ajudam a tornar os botões mais atraentes visualmente e mais fáceis de reconhecer.

Como alterar o tamanho do ícone em um elemento de botão usando código personalizado

Siga os passos abaixo para ajustar o tamanho do ícone dentro do seu elemento Botão.

Passo 1: Selecione o elemento de botão que contém o ícone.

Do editor do GemPages:

• Abra a página ou o modelo onde o elemento Botão está localizado.
• Clique diretamente no Elemento de botão que contém o ícone.
• Confirme se o botão selecionado inclui um ícone posicionado antes do texto.

Após a seleção, o painel de configurações do elemento aparecerá no lado esquerdo do editor.

Certifique-se de estar editando o botão correto antes de continuar.

Passo 2: Abra o Editor de Código Personalizado

Após localizar o elemento Botão:

• Botão direito do mouse no elemento Botão que contém o ícone.
• No menu suspenso, selecione Código personalizado.

Essa ação abre o editor de código personalizado, onde você pode adicionar CSS que se aplica somente a esse elemento específico.

Esta seção permite aplicar estilos adicionais ao elemento selecionado.

Passo 3: Adicione o código CSS para alterar o tamanho do ícone.

No interior do CSS customizado No campo, cole o seguinte código:

Este código controla o tamanho do ícone dentro do botão selecionado.

Substituir:

• .ElementClass com a classe mostrada na parte superior.
• 50px com o tamanho que você desejar.

Após inserir o código, clique em Salve.

O tamanho do ícone será atualizado com base no valor que você inseriu:

Etapa 4: Visualize o resultado

Após a publicação:

• Visualize sua página.
• Verifique se o tamanho do ícone parece proporcional ao texto do botão.
• Teste o layout tanto na visualização para desktop quanto na visualização para dispositivos móveis.

Se necessário, retorne ao editor e ajuste o valor do tamanho novamente.

Você pode repetir o processo até que o tamanho do ícone corresponda ao seu design.

Como escolher o tamanho certo do ícone

O tamanho correto do ícone depende do tamanho do botão e do estilo do texto.

Abaixo estão as faixas de tamanho mais comuns:

Use esses intervalos como pontos de partida e, em seguida, ajuste-os de acordo com o seu layout.