Cómo agregar íconos a los elementos del menú de navegación de WordPress usando cPanel | Hosting mas barato
Si ha visto íconos en un menú de navegación, es posible que también se pregunte cómo usarlos en su sitio web de WordPress. Sin embargo, el problema surge cuando necesitas conocimientos de programación.
Si eres un novato, puedes instalar y activar un complemento para usar cualquiera de los íconos de la biblioteca Font Awesome. Sin embargo, si tiene un poco de conocimiento de CSS, puede agregar rápidamente íconos de imagen a los elementos del menú de navegación de WordPress.
Surge la pregunta de si necesita o no acceso a cPanel. Bueno, en este tutorial necesitas agregar CSS personalizado. Puede utilizar el editor CSS estándar de su área de administración o el espacio CSS adicional en el personalizador.
Aunque la mayoría de los expertos en WordPress ocultan el editor de temas por razones de seguridad, puede usar el personalizador integrado si lo desea.
En este tutorial, le daré un ejemplo del código para que pueda comprender el concepto. Agregar CSS depende de usted.
Eso es porque cada persona tiene un método diferente para agregar CSS personalizado.
Sube imágenes de iconos a tu biblioteca multimedia
En primer lugar, debe descargar imágenes de iconos a su computadora. Sube estas imágenes a tu biblioteca de medios de WordPress.
Si está considerando usar íconos en lugar de imágenes, deberá incluir una biblioteca de íconos de terceros, lo que aumenta las solicitudes HTTP. Así que les voy a ofrecer una solución simple que no afecta el tiempo de carga de la página de un sitio web.
Ahora sigue los pasos.
Paso 1:
Ir Apariencia >> Menús en su área de wp-admin, donde puede ver el menú actual.
Paso 2:
Si observa de cerca en la esquina superior derecha, encontrará un “Opciones de pantalla” Atajo.
Puede ver un mega menú desplegable.
Bajo la “Mostrar propiedades de menú avanzadas” Al encabezar verás un recuadro que puedes buscar Clases CSS, Revisalo.
Paso 3:
Ahora desplácese hacia abajo y abra cualquier elemento del menú. Decimos “En casa.”
Puede ver un campo para completar a continuación Clases CSS (opcional). Agreguemos “Iconos de menú“como una clase de CSS. Haga clic en ese Guardar menú Botón.
Paso 4:
Para que aparezca una imagen de icono, necesita algo de CSS. Dejame mostrarte un ejemplo.
.menuicons {
background-image: url('https://www.yoursite.com/wp-content/uploads/2018/06/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}Nota: No olvide reemplazar la URL de la imagen con la dirección que elija de su biblioteca de medios.
Déjame mostrarte dónde copiarlo. Vaya a su biblioteca de medios, haga clic en la imagen del icono que desea ver, copie la dirección que ve delante de la URL.
Aquí le he mostrado cómo agregar un ícono de imagen para un solo elemento del menú. Para cada elemento del menú, debe seleccionar una clase diferente y un nuevo código CSS con la URL del icono respectivo.
Aquí hay una demostración del ícono de imagen que acabo de agregar para el ícono de inicio.
Como mencioné anteriormente, hay algunas formas diferentes de agregar CSS personalizado. Si no desea cargar CSS desde una fuente que no sea su archivo CSS principal, puede editarlo usando FTP o cPanel.
Ir Administrador de archivos >> wp-content >> temas >> carpeta de temas >> style.css, Haga clic derecho y elija Editar.
Casi todos los hostings de WordPress ofrecen acceso a cPanel.
Agregar íconos de imagen a los elementos del menú de navegación de WordPress
Para muchos usuarios de WordPress, cambiar el diseño del sitio web existente puede ser aterrador, ya que es posible que no tengan ningún conocimiento de CSS.
Sin embargo, como puede ver, todo lo que necesita es un conocimiento básico de CSS para establecer un icono de imagen como fondo de pantalla y ajustar su posición.
Conclusión
Si aún cree que es difícil trabajar con CSS, considere usar un complemento. Aunque no es difícil seguir los pasos enumerados anteriormente.
Espero que pueda agregar íconos de imagen a los elementos del menú de navegación de WordPress.
