Agregar iconos a wordpress

Iconos de menú WordPress sin plugin

En este tutorial, vamos a mostrar cómo agregar fácilmente iconos de fuente impresionante en su menú de cabecera de WordPress y el menú de navegación utilizando nuestro motor de menú temas de WordPress. Aprenda la mejor manera de cómo añadir iconos al menú de cabecera de navegación de WordPress en esta guía y tutorial.

Añadir iconos al menú de navegación de su sitio aumenta el atractivo visual de su contenido. Además, añade un diseño agradable a su sitio web. Uno de los beneficios de tener un sitio web WordPress es que puede modificarlo según sea necesario. Esto incluye, pero no se limita a, mejorar el atractivo visual de sus menús de navegación con iconos basados en imágenes.

Existen dos métodos para añadir iconos a su sitio web WordPress: codificarlos usted mismo o utilizar un plugin que añada un menú de iconos a su tema. El primer método pretende ofrecer versatilidad para conseguir el diseño deseado, pero requiere conocimientos de CSS. Te recomendamos que utilices el segundo método si no dominas la codificación.

Para empezar, debes iniciar sesión en tu panel de control de WordPress. Después de iniciar sesión, vaya a la pestaña “Apariencia”, y haga clic en el “Menú” una vez en el panel del editor de menús y asegúrese de que está en su menú principal (el menú que guarda como su menú principal para mostrar en la navegación de cabecera de su sitio).

¿Cómo puedo añadir un icono a mi menú de WordPress sin plugins?

Añadir iconos a los elementos del menú

En la administración de WordPress, vaya a Apariencia > Menús para poder editar su menú de navegación. Si aún no ha creado un menú de navegación, cree uno ahora y asegúrese de que ha marcado la casilla de verificación en la pantalla de menús para que esté en la ranura de “Navegación principal” de su tema.

  Agregador blog respetuoso wordpress

¿Cómo añado un icono al CSS de WordPress?

En la página Apariencia ” Menús, haz clic en “Opciones de pantalla” y marca la casilla junto a “Clases CSS”. Una vez hecho esto, simplemente haga clic para expandir el elemento de menú en el que desea mostrar el icono. Ahora debería ver un nuevo campo “Clases CSS”.

Iconos Font awesome

Aprende a añadir un icono de Carrito o Teléfono al Menú de WordPress. Añadir iconos a los menús en la cabecera, barra lateral o pie de página. También puede añadir el icono a la derecha o a la izquierda del texto de la etiqueta u ocultar el texto de la etiqueta por completo.

Mientras que un icono puede ser entendido por la mayoría de la gente, cuando se agrega uno sin texto, puede no ser accesible para las personas con discapacidad visual. Puedo pegar el código del icono e incluir el texto. Para hacerlo accesible, he optado por incluir el atributo title, que pueden entender los motores de búsqueda y los lectores de pantalla.

Dicho esto, prefiero ocultar el texto envolviendo mi etiqueta con un span que tenga una clase ‘screen-reader-text’ como se ilustra a continuación (1). El texto de la etiqueta no es visible, pero puede ser leído por lectores de pantalla y motores de búsqueda. Dado que hay código involucrado, hay posibilidades de cometer un error.

Visite https://tablericons.com/ para obtener más de 1000 iconos personalizables gratuitos. Como se trata de iconos vectoriales (formato SVG), son muy ligeros y se ven nítidos en cualquier tamaño.

WordPress añadir imagen al menú

En este post voy a demostrar cómo se puede hacer esto sin necesidad de utilizar ningún plugin o subir cualquier imagen. En lugar de eso, harás algunos ajustes en tu menú de navegación a través del administrador de WordPress y luego añadirás algo de código en el archivo de tu tema.

  Agregar entradas dentro de una apgina wordpress

Cuando hayas terminado, tendrás unos sencillos iconos junto a cada elemento de tu menú de navegación, y lo mejor es que no tendrás que subir ninguna imagen o archivo que pueda ralentizar tu sitio. Este es el aspecto que tendrá el menú de navegación una vez que hayamos terminado:

Si aún no tienes un tema con el que estés trabajando, tendrás que crear uno. La forma más fácil de hacerlo es creando un tema hijo de un tema existente, lo que significa que puedes añadir tus propios cambios sin hacer nada al tema original. Voy a crear un tema hijo del tema por defecto, que es twenty fifteen.

Font Awesome es una librería de iconos creada usando una fuente de iconos. Esto significa que no utiliza imágenes de fondo, como podrías haber hecho en el pasado al añadir iconos a tu sitio. En su lugar utiliza clases CSS, añadiendo un pseudo-elemento a cualquier cosa con una clase de icono. Este pseudo-elemento añade un carácter especial antes del elemento, con el estilo del icono. El resultado es un icono que aparece inmediatamente antes del elemento al que has añadido la clase CSS.

WordPress add_menu_page icono

En este post voy a demostrar cómo se puede hacer esto sin necesidad de utilizar ningún plugin o subir cualquier imagen. En lugar de eso, harás algunos ajustes en tu menú de navegación a través del administrador de WordPress y luego añadirás algo de código en el archivo de tu tema.

Cuando hayas terminado, tendrás unos sencillos iconos junto a cada elemento de tu menú de navegación, y lo mejor es que no tendrás que subir ninguna imagen o archivo que pueda ralentizar tu sitio. Este es el aspecto que tendrá el menú de navegación una vez que hayamos terminado:

  Agregar javascreipt a wordpress

Si aún no tienes un tema con el que estés trabajando, tendrás que crear uno. La forma más fácil de hacerlo es creando un tema hijo de un tema existente, lo que significa que puedes añadir tus propios cambios sin hacer nada al tema original. Voy a crear un tema hijo del tema por defecto, que es twenty fifteen.

Font Awesome es una librería de iconos creada usando una fuente de iconos. Esto significa que no utiliza imágenes de fondo, como podrías haber hecho en el pasado al añadir iconos a tu sitio. En su lugar utiliza clases CSS, añadiendo un pseudo-elemento a cualquier cosa con una clase de icono. Este pseudo-elemento añade un carácter especial antes del elemento, con el estilo del icono. El resultado es un icono que aparece inmediatamente antes del elemento al que has añadido la clase CSS.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad