Icono Simple (Componente simple)
El COMPONENTE ICONO SIMPLE, nos permite añadir un icono en formato SVG que podremos personalizar añadiendo múltiples configuraciones que explicaremos en este tutorial.
Podremos añadir Iconos gratuitos preconfigurados utilizando el selector disponible en el componente o copiando el código desde las webs de Fontawewsome y Bootstrap Icons.
Si accedemos a la edición del COMPONENTE ICONO SIMPLE, veremos que está divida en dos partes:
Parte superior: en la que podremos elegir el icono desde el listado que nos aparece en el lado izquierdo o acceder a las páginas de Fontawesome o Bootstrap Icon , elegir el icono, copiar su código y pegarlo en el campo de la derecha siguiendo el ejemplo.
Parte inferior: con el resto de configuraciones adicionales, divididas en varias pestañas para facilitar su implementación y que detallaremos a continuación.
En la primera pestaña, con el nombre EXTRAS, encontraremos configuraciones adicionales para aplicar en el icono, que son:
- Tamaño del ícono.
- Girar, que permite valores positivos y negativos.
- Efectos de animación.
- Un enlace al que nos llevará el icono si hacemos clic sobre él.
La siguiente pestaña, con el nombre COLOR, permite elegir los dos colores que se podrán aplicar al icono y al fondo del bloque.
Al hacer clic sobre el icono, su color cambiará automáticamente, gracias a un filtro de CSS.
En la próxima pestaña, con el nombre BLOCK, encontraremos varias personalizaciones destinadas a modificar el bloque dentro del que se encuntra el icono, agrupada en cuatro pestañas, que son:
- Extras
- Margen
- Padding o Relleno
- Borde
Dentro del pestaña BLOCK, si desplegamos el primer grupo de configuraciones podremos configurar:
- Altura fija del bloque (Fixed height PC)
- Efecto sombrar (Sombra del bloque)
En la segunda pestaña dentro de BLOCK, podremos configurar:
- Margen superior
- Margen inferior
En la tercera pestaña dentro de BLOCK, podremos configurar:
- Unidad de Padding o Relleno.
- Padding Global
- Padding superior
- Padding lado derecho
- Padding inferior
- Padding lado izquierdo
Por último, dentor de la pestaña BLOCK, encontramos las configuraciones relacionadas con el borde del bloque, éstas a su vez, estás agrupadas en tres pestañas para facilitar su implementación, que son:
- Color, ancho y estilo del borde (Color, width, Style)
- Tipo de borde (Border type)
- Radio o curvatura del border (Radio del borde)
En el primer grupo de configuraciones del borde encontramos:
- Un selector de colores
- Un selector para especificar la unidad de media que aplicaremos al ancho del borde
- Un selector para escoger entre varios estilos de borde.
En el segundo grupo de configuraciones del borde encontramos:
- Borde global
- Borde superior (Border Top)
- Borde derecho (Border Right)
- Borde inferior (Border Botton)
- Borde izquierdo (Border Left)
En el último grupo de configuraciones del borde encontramos:
- Curvatura del Borde global
- Curvatura del borde Arriba a la derecha
- Curvatura del borde inferior derecha
- Curvatura del borde superior izquierda
- Curvatura del borde inferior izquierda
La última de las pestañas de configuración globales del COMPONENTE ICONO SIMPLE, se llama MOBILE y nos permite definir varias configuraciones específicas para estos dispositivos; éstas son:
- Altura fija en móviles
- Relleno superior en móviles
- Relleno inferior en móviles
