Insertar iconos en wordpress

11/09/2022

Insertar iconos en wordpress
Índice
  1. Iconos de fuentes impresionantes
  2. ¿Cómo puedo añadir un icono a WordPress sin necesidad de un plugin?
  3. ¿Cómo puedo añadir iconos delante del texto en WordPress?
    1. Lista de iconos de WordPress
    2. Font awesome wordpress plugin
    3. Icono de cabecera de WordPress

Iconos de fuentes impresionantes

En este post te demostraré cómo puedes hacer esto sin usar ningún plugin ni subir ninguna 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. Así es como se verá 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ía haber hecho en el pasado al añadir iconos a su 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. Lo que se obtiene es un icono que sale inmediatamente antes del elemento al que se ha añadido la clase CSS.

¿Cómo puedo añadir un icono a WordPress sin necesidad de un plugin?

Vaya a Admin Dashboard y vaya a la opción Media en el menú de la izquierda y haga clic en Add New. Selecciona todas las imágenes de iconos y súbelas. Después de subirlas, abre un archivo de bloc de notas y pega las URLs de cada icono y puedes nombrarlas para que puedas recordar qué URL es para cada icono.

¿Cómo puedo añadir iconos delante del texto en WordPress?

Al hacer clic en el botón de iconos se abrirá un menú desplegable con todos los iconos disponibles en el conjunto de fuentes de iconos. Al seleccionar un icono de este menú desplegable, se insertará el icono en el editor de publicaciones. También puedes cambiar el tamaño y el color de la fuente utilizando los botones del editor visual.

Lista de iconos de WordPress

Los iconos de WordPress pueden ayudar a mejorar la experiencia del usuario en su sitio. Por ejemplo, puedes utilizar iconos en tu menú de navegación, en el pie de página y en otras partes de tu sitio para llamar la atención del usuario y hacer que realice una acción, entre otros beneficios.

En WordPress, los iconos funcionan igual que todos los iconos web. Están diseñados para llamar la atención sobre partes importantes de una página web, indicar información ocupando menos espacio que el texto y reforzar su marca.

Quartz es sólo un ejemplo de un sitio web de WordPress que utiliza iconos en su sitio móvil para ayudar a los lectores a navegar por el sitio. Pueden hacer clic en el icono de búsqueda para encontrar un artículo específico, hacer clic en el icono de persona para iniciar sesión o hacer clic en uno de los iconos de la parte inferior de la pantalla para navegar por diferentes partes del sitio.

Hay dos maneras de añadir iconos a WordPress. Puedes utilizar un plugin de iconos como el plugin Font Awesome, que es ideal para los principiantes. O puede utilizar Dashicons, el paquete de iconos por defecto de WordPress. Este método es ideal para usuarios más avanzados, ya que requiere editar el archivo functions.php.

Font awesome wordpress plugin

Si alguna vez has visto un sitio web y te has preguntado cómo han hecho los iconos del menú, estás en el lugar adecuado. Los iconos de menú de WordPress añaden un elemento visual a tu sitio e incorporan iconos relevantes para guiar a tus usuarios a las páginas que necesitan ir.

En resumen, un icono de menú es una forma sencilla y no invasiva de hacer que su sitio web tenga un aspecto más profesional, a la vez que proporciona sutilmente un empujón extra a sus usuarios indicando exactamente lo que pueden esperar cuando hacen clic en una pestaña del menú.

Nota: Suponemos que ya tienes un menú de WordPress configurado. Si no es el caso, vaya a este artículo (o a este otro para menús desplegables de varios niveles) para aprender a configurar su menú de WordPress.

Asumiendo que ya tienes un menú, deberías poder ver los elementos del menú bajo el encabezado Estructura del menú. Con múltiples menús, tendrás que seleccionar el que quieras editar. También hay un módulo a la izquierda llamado Añadir Elementos de Menú, que te permite hacer pestañas de menú a partir de páginas, entradas, enlaces personalizados y más.

Hay un área de vista previa que proporciona un ejemplo de cómo se ve el elemento de menú a medida que ajustas la configuración. Por ejemplo, al aumentar el tamaño de la fuente y mover la posición del icono a "Después" se obtiene una nueva vista previa.

Icono de cabecera de WordPress

Esperamos que este artículo te haya ayudado a aprender a utilizar fuentes de iconos en el editor de entradas de WordPress sin necesidad de escribir código HTML. Quizás también quieras ver nuestra guía de rendimiento de WordPress para optimizar la velocidad de tu sitio web o los mejores plugins de páginas de aterrizaje para WordPress.

The Ultimate WordPress ToolkitObtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener¡Descargue ahoraInteracciones del lector9 ComentariosDeje una respuesta

Deja un comentario Cancelar la respuestaGracias por elegir dejar un comentario. Por favor, tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilices palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.Nombre *

Subir
Esta web utiliza cookies propias para su correcto funcionamiento. 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