En este post, vamos a descargar unos cuantos iconos para añadirlos a nuestro menú de navegación. Subiremos estos iconos a la biblioteca multimedia de WordPress y, finalmente, utilizaremos los iconos para los enlaces de nuestro menú de WordPress con unas pocas líneas de CSS.
Esta es una gran manera de hacer esto, pero… a veces el icono que estás buscando no está disponible en la biblioteca de Font Awesome, o acabas de encontrar un icono realmente genial en línea que estás deseando mostrar en tu sitio web, pero simplemente no sabes cómo.
Para este tutorial necesitarás un tema hijo. La forma más fácil de crear un tema hijo es con un plugin, como Child Theme Generator. Una vez que haya terminado de crear su tema hijo, puede eliminar directamente este plugin.
En el lado izquierdo de su panel de control de WordPress, elija Apariencia -> Menús. En la parte superior del lado derecho hay un botón que dice Opciones de pantalla. Haga clic en él y marque la casilla Clases CSS.
Abra su menú de abajo, haga clic en un enlace, para mí que es “Inicio” y se ve un campo donde se puede añadir una clase CSS. Mi archivo .png se llama house.png y quiero usarlo para el enlace Home, así que añado la clase house. Guarda el menú.
Elementor es uno de los constructores de páginas de WordPress más populares. Ofrece iconos de FontAwsome para usar, pero en la mayoría de los proyectos, usted necesita sólo algunos iconos por lo que es inútil utilizar toda la biblioteca de FontAwsome que sólo añadirá CSS innecesario a su sitio.
Justo ahora cuando estaba trabajando en mis sitios y traté de subir algunos iconos de Fontello a mi sitio web (el icono de búsqueda superior en mi sitio) no pude subir los iconos. Primero pensé que ocurría por un conflicto con otro plugin. Así que desactivé todos los plugins excepto Elementor y Elementor Pro, incluso después de eso, no pude subir mi archivo zip de iconos Fontello.
Para tu información, si tu ZIP instalado dice que sí, como en mi imagen de arriba, y aún así no puedes subir un zip de iconos personalizados en Elementor, deberías ver este vídeo para asegurarte de que has hecho todo correctamente.
¿Te cuesta subir imágenes SVG en Elementor? Bueno, ¡es tu día y alguien acaba de escuchar tu deseo hoy! Ahora Elementor viene con esta funcionalidad para incluir tus imágenes en formato de archivo SVG directamente desde el editor de Elementor, sin necesidad de utilizar ningún addon de terceros. Con los archivos SVG, el contenido de tu imagen mantiene su resolución o tamaño real para todo tipo de dispositivos.
La abreviatura SVG es Scalable Vector Graphics (gráficos vectoriales escalables), que representa el contenido de la imagen en formato XML, y las imágenes en formato de archivo XML son legibles tanto por la máquina como por el ser humano. Ayuda a sus imágenes a mantener su calidad real sin romper ninguna parte de la imagen.
Si usted utiliza el formato SVG, entonces usted puede escalar fácilmente sus imágenes como para adaptarse a su diseño del sitio web. Se mostrará una imagen de respuesta como usted puede fácilmente ampliar o hacer que sea pequeño sin ninguna pérdida de calidad de archivo o la resolución. Así que, por esta razón, los diseñadores web o desarrolladores web apoyan plenamente el formato de archivo SVG por su mejor soporte de navegador y capacidad de respuesta.
Si usted está usando el archivo SVG, puede ser fácilmente buscado e indexado por su formato basado en texto. Como usted sabe las imágenes de archivos más grandes ralentizar la velocidad del sitio o el rendimiento. Pero el archivo de imagen SVG consiste en pequeños tamaños de archivo disponibles con gráficos extendidos, y más rápido el rendimiento del sitio.
Permite al usuario añadir sus propios iconos personalizados a los controles y elementos de iconos incorporados en Elementor, eliminando así la dependencia de FontAwesome y proporcionando una mejor oportunidad para la marca con conjuntos de iconos personalizados en sus sitios web. Funciona exclusivamente mediante el uso del servicio gratuito de fuentes de iconos de Fontello.
Este plugin depende de un servicio de terceros para su funcionalidad proporcionado por Fontello. No se envía ninguna información privada a su servidor, sino que son sus descargas de fuentes web las que se utilizan para añadir fuentes a este plugin.
Hay una pequeña, pequeña posibilidad de que este plugin no funcione en su alojamiento web. Esto es causado por dos cosas generalmente: una regla de mod_security que marca la carga ZIP, o la falta de bibliotecas PHP necesarias para descomprimir archivos (ZipArchive). La buena noticia es que tu proveedor de alojamiento puede arreglar ambas cosas fácilmente. Si se niegan a hacerlo, considere la posibilidad de cambiarse a un host más moderno.