Uno de los elementos que más uso tiene cuando estamos dándole forma a nuestro sitio web son los iconos. Sobre todo cuando estamos utilizando Elementor, el cual desde su versión gratuita incluye una gran variedad de iconos, los cuales podemos utilizar para múltiples casos.
Ya sea para darle sentido a un texto, hacer un listado de características y que cada ítem tenga un icono relacionado o simplemente que sea parte del diseño a mostrar; en este último caso el diseño deseado es un pilar fundamental para poder materializar la estructura que queremos lograr en nuestro sitio web, puede darse el caso de que los iconos por defecto no cumplan con la línea gráfica, teniendo que o utilizar imágenes o importar iconos acordes a nuestras necesidades.
A continuación vamos a ver como por medio de la magia de los estilos CSS vamos a transformar los iconos por defecto de Elementor en iconos delineados y así casi duplicar nuestras posibilidades en cuanto a diseño respecta.
Tabla de contenidos
Tipos de Iconos
Como mencionamos anteriormente, los iconos pueden variar en como se muestran, por una parte, encontramos los iconos con un relleno definido.
Por otra parte, tenemos los iconos que hacen el contorno o delineado de una forma en particular.
Además de la diferencia notable, el caso a presentar es que dependiendo del diseño y lo que queramos transmitir, los iconos delgados y definidos suelen ser más sutiles y estéticos que los que ya tienen un relleno definido.
Aplicando Estilos CSS
Considerando los iconos que tenemos disponibles, es posible cambiarles su aspecto por medio de estilos CSS, los cuales podemos aplicarlos por medio de un plugin como “Simple Custom CSS Plugin”.
O bien podemos utilizar las opciones nativas que ya tiene WordPress desde el apartado de Apariencia-> Personalizar-> CSS Agregado.
Los estilos CSS a agregar son los siguientes:
.elementor-icon,
.elementor-icon-list-icon{
color: currentColor;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: currentColor;
}
Vamos a definir que contiene el código de CSS para entenderlo y de ser necesario modificarlo a nuestro gusto.
Primero estamos definiendo las clases estipuladas en Elementor para los iconos, tanto independientes en los módulos de “Icono” y “Caja de Icono” como otros módulos que involucran iconos como el módulo de “Listado de iconos”.
Entre las características tenemos que siempre se use el término “currentColor” para que el color pueda ser gestionado desde las propias opciones del módulo en Elementor.
El “webkit-text-fill-color;” se define transparente para que solo sea visible el borde, el cual esta estipulado con “-webkit-text-stroke-width” donde en píxeles vamos a hacer mas o menos grueso dicho borde.
Una vez guardado los estilos podemos ver los resultados en todos nuestros iconos del sitio.
Como podemos apreciar, los iconos con relleno definido ahora tienen un borde de 2px el cual fue el definido; sin embargo, también aplica para los iconos más delgados, lo cual no se ve mal en lo absoluto.
Todo funciona de la forma esperada pero debemos recordar que hay algunos iconos donde estos estilos hacen que si se noten un poco distorsionados como los siguientes.
En este caso, como los estilos CSS que hemos aplicado son globales, afectan a todos los iconos, independientemente de cuál se utilice, para solucionar esto solo bastaría con primero definir y asignar una clase a los módulos que contengan los iconos a aplicar los estilos, luego puntualizar en el código que los estilos se ejecuten a partir de la clase asignada, por ejemplo, definimos la clase “light-icon” y se la asignamos solo a los módulos que contengan el icono deseado.
Luego modificamos los estilos CSS acorde a la clase creada y asignada.
Al guardar cambios podemos validar de que solo el icono que contiene la clase asignada tendrá los estilos que hemos definido anteriormente.
De esta manera puedes disponer que icono quieres que tenga este nuevo aspecto.
Conclusiones
Hay múltiples formas en las que podemos importar, invocar y cargar iconos en nuestro sitio, pero si utilizamos Elementor y con tan solo unas pocas líneas de CSS nos da la flexibilidad de potenciar la vista de los iconos, haciendo que la librería disponible se expanda considerablemente además pudiendo aplicar los estilos de forma aislada solo para aquellos elementos que lo requieran.
Si te interesa más contenido relacionado con lo genial que resulta el utilizar CSS o más trucos que podemos hacer con Elementor, échale un vistazo a los siguientes artículos.
- Como crear un botón animado en Elementor Pro y Elementor Gratuito.
- Crear Menú Vertical en Elementor Versión Gratuita
- Crear tarjetas con Elementor para empleados o usuarios
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y Woocommerce en Webempresa.
