Tutorial de Kadence: Guía detallada para personalizar iconos SVG con Kadence Blocks Pro

Kadence Bloques Pro Ofrece diversas formas de ayudar a los usuarios a utilizar la personalización en sus sitios web SVG Iconos. Desde elestéticayactuacionesno obstanteEscalabilidad tecnológicaLos iconos SVG pueden desempeñar un papel importante. Este artículo describe cómo añadir iconos SVG personalizados utilizando Kadence Blocks, cubriendo varios métodos comunes.

SVG y seguridad/soporte

SVG(Scalable Vector Graphics) es un formato de icono muy utilizado que se puedeCambia el tamaño sin distorsiones. Aunque tiene mucho que ofrecer en términos de diseño, el WordPress Debe preocuparse por la seguridad cuando utilice SVG en el formato SVG, que se basa en el formato XML y, por tanto, pueden ocultar código malicioso. Tenga en cuenta lo siguiente cuando utilice iconos SVG:

• riesgo para la seguridadEl formato SVG puede incluir scripts maliciosos, por lo que debe utilizarse con precaución.
• fuente (de información, etc.)Recomendación: Intente utilizar SVG creados por usted mismo y, si utiliza iconos de terceros, asegúrese de elegir una fuente fiable.
• Tamaño del iconoSe recomienda el formato SVG de 24x24px, que es el tamaño estándar de los bloques Kadence.
• escaneando: Antes de cargar iconos SVG, se recomienda escanearlos para garantizar que no haya posibles problemas de seguridad.

Si desea controlar el color del icono, se recomienda utilizar el icono de relleno, ya que el icono de trazo no permite ajustar el color directamente.

Añade iconos personalizados con el gestor de iconos integrado

Bloques Kadence Se proporciona un gestor de iconos fácil de usar, que permite a los usuarios cargar y utilizar directamente iconos personalizados. SVG Iconos. Aquí están los pasos exactos:

• Abrir el menú desplegable de selección de iconos
  En Configuración de iconos, haga clic en el menú desplegable de selección de iconos para acceder a la interfaz de gestión de iconos.

• Cargar un SVG personalizado
  En la pestaña Mis iconos, haga clic en el icono más y seleccione Cargar archivo SVG personalizado.

• Consejos de seguridad
  Al cargar, el sistema le recordará que compruebe SVG Los archivos están limpios y se ajustan a los requisitos de tamaño (24x24px).

• Pegar código SVG
  Si tiene a mano el código SVG, haga clic en "Pegue su código SVG", basta con pegar el código directamente.

• Finalizar la carga
  Una vez finalizada la carga, el icono se mostrará en la ventana "Mis iconos", puede seleccionar y utilizar el icono.

• Icono Eliminar
  Si un icono ya no es necesario, sitúese sobre él y haga clic en el icono rojo X Borrar.

Convertir trazos SVG en rellenos

Bloques Kadence Controla el color del icono rellenándolo con un color. Si tu SVG Los iconos que utilizan un trazo en lugar de un relleno no tendrán efecto en sus ajustes de color. Por lo tanto, se recomienda convertir el icono de trazo en un icono de relleno.

Método de conversión
Los iconos de trazo SVG pueden convertirse en iconos de relleno mediante una herramienta en línea. Tras la conversión, el aspecto del icono no cambia, pero sus propiedades se modifican para que los colores puedan ser controlados por Kadence.

• Icono de carrera: Estos iconos suelen estar definidos por un contorno y deben convertirse en un icono de relleno antes de que puedan modificarse mediante los ajustes de color de Kadence.

• Icono de relleno: Es un gráfico sólido que permite el control directo del color sin conversión.

Uso de la función de búsqueda de iconos de Kadence

Kadence Se proporciona una función de búsqueda de iconos para que los usuarios busquen e importen otros iconos personalizados disponibles. Los pasos para utilizar esta función son los siguientes:

• Abrir el menú desplegable de selección de iconos
  De nuevo, haga clic en el menú desplegable de selección de iconos en Configuración de iconos para acceder a la pantalla de Gestión de iconos.

• Iconos de búsqueda
  En la ventana emergente, haga clic en "buscar algo", introduzca el nombre del icono y el sistema mostrará el icono correspondiente.

• Seleccionar y añadir iconos
  Una vez que haya encontrado el icono deseado, haga clic en el botón "Añadir" de la esquina inferior derecha para añadirlo a la lista de iconos personalizados.

• Cargar más iconos
  Si no encuentra el icono adecuado, puede hacer clic en "Cargar más" para ver más opciones de iconos.

Añadir iconos personalizados con fuentes IcoMoon

IcoMoon es una herramienta gratuita que permite al usuario colocar SVG Los iconos se convierten en archivos de fuentes. A continuación se muestra una lista de fuentes que se pueden convertir en fuentes utilizando la función IcoMoon Pasos para añadir un icono personalizado para el método de fuente:

• Seleccionar icono
  existe IcoMoon En el sitio web, cargue o seleccione el icono SVG que desea utilizar.
• Generar fuentes
  Tras seleccionar el icono, pulse el botón "Generar fuente".

• Descargar archivos de fuentes
  Descargue el archivo de fuentes generado.

• Cargar archivos de fuentes
  Descomprima el archivo descargado y busque el archivo .json y, a continuación, vaya al archivo Kadence Panel de control, vaya a Bloques Kadence > Iconos personalizados y cargue el icono .json Documentación.

• Seleccionar y utilizar iconos
  Una vez finalizada la carga, tus iconos se importarán KadencePuede utilizarlos como cualquier otro icono de Kadence.

resúmenes

Bloques Kadence Se ofrecen diversos métodos para ayudar a los usuarios a utilizar fácilmente la personalización en sus sitios web SVG Iconos. Utilice el gestor de iconos incorporado, la función de búsqueda de iconos o utilice la función IcoMoon Convertir iconos SVG en fuentes, puede elegir el método adecuado según sus necesidades. Utilizando estos métodos, puede añadir fácilmente iconos personalizados a su sitio web para mejorar la belleza y la funcionalidad del diseño de su página.