Cómo cambiar el tamaño del icono en un elemento de botón usando código personalizado

En algunos diseños, es posible que desee ajustar el tamaño del icono para que se adapte mejor al texto del botón o al diseño general. Actualmente, el tamaño del icono dentro de un elemento Button no se puede ajustar directamente desde las opciones de estilo integradas. Para personalizar el tamaño del icono, puede usar un pequeño fragmento de CSS en la configuración del elemento.

Esta guía le explica paso a paso cómo aplicar el cambio correctamente.

Acerca de los diseños de botones con iconos

El Elemento de botón GemPages admite diferentes diseños dependiendo de cómo lo configures.

Existen dos diseños de botones comunes:

• Botón sin icono: Este diseño contiene solo texto y no incluye ningún icono.
• Botón con icono: Este diseño incluye un icono colocado antes del texto del botónLos iconos ayudan a que los botones sean más atractivos visualmente y más fáciles de reconocer.

Cómo cambiar el tamaño del icono en un elemento de botón usando código personalizado

Sigue los pasos que se indican a continuación para ajustar el tamaño del icono dentro del elemento Botón.

Paso 1: Seleccione el elemento del botón que contiene el icono.

Del editor de GemPages:

• Abra la página o plantilla donde se encuentra su elemento Botón.
• Haga clic directamente en el Elemento de botón que contiene el icono.
• Confirme que el botón seleccionado incluye un icono situado delante del texto.

Una vez seleccionado, el panel de configuración del elemento aparecerá en el lado izquierdo del editor.

Asegúrese de editar el botón correcto antes de continuar.

Paso 2: Abra el editor de código personalizado.

Después de localizar el elemento Botón:

• Haga clic con el botón en el elemento Botón que contiene el icono.
• En el menú desplegable, seleccione Código Personalizado.

Esta acción abre el editor de código personalizado, donde puedes agregar código CSS que se aplique únicamente a este elemento específico.

Esta sección le permite aplicar estilos adicionales al elemento seleccionado.

Paso 3: Añade código CSS para cambiar el tamaño del icono.

Dentro de CSS personalizado En el campo, pegue el siguiente código:

Este código controla el tamaño del icono dentro del botón seleccionado.

Reemplazar:

• .ElementClass con la clase que se muestra en la parte superior.
• 50px con el tamaño que desee.

Después de introducir el código, haga clic en Guardar.

El tamaño del icono se actualizará en función del valor que haya introducido:

Paso 4: Previsualizar el resultado

Después de publicar:

• Previsualice su página.
• Comprueba si el tamaño del icono está en proporción con el texto del botón.
• Prueba el diseño tanto en la vista de escritorio como en la de dispositivos móviles.

Si es necesario, vuelva al editor y ajuste de nuevo el valor del tamaño.

Puedes repetir el proceso hasta que el tamaño del icono coincida con tu diseño.

Cómo elegir el tamaño de icono adecuado

El tamaño correcto del icono depende del tamaño del botón y del estilo del texto.

A continuación se muestran los rangos de tamaño más utilizados:

Utilice estos rangos como puntos de partida y luego ajústelos según su diseño.