Cómo agregar iconos a los menús personalizados de WordPress sin complementos

Agregar iconos al menú de navegación de su sitio ofrece a los visitantes algunas indicaciones visuales sobre el contenido y también agrega una nota de diseño agradable a su sitio, demostraré cómo puede hacerlo sin usar ningún complemento o imágenes de carga. En su lugar, realizará algunos ajustes a su menú de navegación de WordPress y luego agregará un código a su archivo de tema. Cuando haya terminado, tendrá algunos iconos simples al lado de cada elemento en el menú de navegación, y la mejor parte es que no tendrá que cargar imágenes o archivos que puedan ralentizar su sitio. Esto es lo que el menú de navegación Parece que después de terminar:

Usaremos la biblioteca de iconos Font Awesome, que puede agregar a través de un complemento, pero no la necesita, porque puede llamarlo fácilmente desde el archivo de base. Agregar íconos de menú: una presentación general estos son los pasos que seguirá si sigue con esta publicación:
Cree un tema secundario del tema veinte y quince para trabajar (puede omitir este paso si trabaja con su propio tema).
Active la maravillosa biblioteca de fuentes en el archivo de función de su base.
Agregue las clases CSS a los elementos en el menú de navegación a través del administrador de WordPress.
Agregue algo de estilo a la hoja de estilo para obtener el aspecto y las fuentes correctos.
Vamos a empezar.
Creando un tema de veinte quince niños si aún no tiene un tema en el que esté trabajando, deberá crear uno. La forma más fácil de hacerlo es creando un tema secundario de un tema existente, lo que significa que puede agregar sus propios cambios sin hacer nada al tema original. Crearé un tema secundario del tema predeterminado, que es veinte y quince. Si es nuevo en el tema de los niños, consulte nuestra guía integral explicando cómo hacerlo. Activar la fuente impresionante El siguiente paso es activar la biblioteca de Font Awesome en su tema antes de hacerlo, echar un vistazo rápido a Font Awesome: Font Awesome es una biblioteca de icono creada usando una fuente de icono. Esto significa que no usa imágenes de fondo, como lo habría hecho en el pasado cuando agrega iconos a su sitio. Utiliza clases CSS, agregando un pseudoelemento a cualquier cosa con una clase de iconos. Este pseudo elemento agrega un personaje especial antes del elemento, con el estilo del icono. Lo que llega es un icono que aparece inmediatamente antes del elemento al que agregó la clase CSS. Si desea obtener más información sobre cómo Font Awesome usa CSS, eche un vistazo a la página de ejemplos en su sitio web. También aprenderá cómo usar clases para mostrar iconos a medida que trabajamos a través de este tutorial, que es probablemente la forma más fácil de familiarizarse.

Así que comencemos por una fuente activa de impresionante sobre nuestro tema. En la carpeta de temas, cree un nuevo archivo llamado functions.php. Si su tema ya tiene un archivo con características, ábralo. Agregue este código al archivo con funciones:
Cargue la idea 76E9AB6F27C66DE24D3B0C132521E214 para echar un vistazo a lo que esto hace:
Crea una función llamada wpudev_enqueue_icon_stylesheet ().
Dentro de esta característica, usa wp_register_style () para grabar la hoja de estilo Font Awesome, que está alojada fuera de su sitio. Puede encontrar este enlace en la página de inicio del sitio increíble.
Luego use wp_enqueue_style () para wp_enqueue_style () en wp_enqueue_style () el estilo que acaba de grabar.
Finalmente, wp_enqueue_scripts la función en el gancho de acción wp_enqueue_scripts, quien le dice a WordPress cuándo ejecutar la función.
Tenga en cuenta que, en la página inicial de Font Awesome, se le ofrecen instrucciones para llamar a la hoja de estilo en la sección de sus páginas web (que estaría en el archivo de encabezado.php de un tema de WordPress. Este no es lo más Buena manera de grabar hojas de estilo en WordPress: el método anterior es la forma en que debes hacerlo.
Ahora guarde las funciones del archivo.php. Agregando CSS a los elementos del menú Ahora que hemos grabado Font Impresionante, podemos usar las clases CSS que ofrece para agregar iconos a nuestros elementos de menú. En el administrador de WordPress, vaya a los menús de aspecto> 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 haber marcado el cuadro de selección desde la pantalla del menú para que esté en el espacio de “navegación principal” en su WordPress le permite agregar una clase CSS a cada elemento En su menú, pero no puede ver el campo de forma predeterminada: debe activarlo primero:
En la parte superior de la pantalla, haga clic en las opciones de pantalla. Pregunte el cuadro junto a las “Clases CSS” está marcado.
Cierre la pestaña Opciones de pantalla.
Ahora puede agregar una clase a cada uno de los elementos del menú. Comience con el elemento del menú “Inicio”. Cerca del elemento del menú, haga clic en la flecha hacia abajo para ver más opciones relacionadas con ese elemento de menú. En el campo “CSS CSS”, escriba lo siguiente:
Cargue el esencial B53EA6BC20705CCEFF008078360A9A0
Esto agrega tres clases al elemento del menú:
FA se usa para todos los elementos con un increíble icono de fuente
Face-lg establece el tamaño del icono en el mar
FA-Home se refiere al icono específico que desea mostrar.
La interfaz de administración para su menú ahora se verá así:
Ahora haga lo mismo para cada uno de los elementos del menú. Encontrará más íconos y sus clases en la página de icono Font Awesome.
Yo uso las siguientes clases:
Inicio: FA-LG FA-HOME (como arriba: un ícono de la casa)

Noticias: FAC LG FAC-Newspaper-O (un ícono del periódico)

Galería: FAC-LG FACMERA-RETERO (un ícono de la habitación)
Acerca de: FAC LG FAC-Info-Circle (un icono de información)
Contacto: Make-LG Do It (un icono de sobre)
Puedes usar los iconos que quieras. Solo asegúrese de agregar FA FA-LG y luego la clase de icono para cada elemento del menú de navegación en el campo “Clase CSS”.
Ahora guarde el menú haciendo clic en el botón Menú Guardar. Los elementos del menú de estilización ahora echen un vistazo al menú de su sitio en la parte delantera. Aquí está el mío:
¡Es un poco de desastre! Las fuentes en mi menú han cambiado, los iconos están por encima del texto cuando quiero estar a la izquierda, y mis elementos de menú están uno al lado del otro cuando deben estar uno encima del otro. Si trabaja con su propio tema, puede encontrar que su menú se ve mejor (¡o peor!) Y es posible que deba hacer algunos cambios diferentes. Para resolver los problemas en mi sitio, agregaré un estilo a mi hoja de estilo. Comencemos haciendo los elementos del menú sobre el otro. Abra la hoja de estilo del tema y agregue lo siguiente:
La idea de 419105FD2929459D87EE5E974C58 está cargada.
Esto asegurará que cada elemento de menú ocupe el 100% del ancho de su elemento que lo contenga. Nota: Si trabaja con su propio tema, es posible que deba dirigirse a diferentes clases o identificaciones para su menú, dependiendo de cómo se codifique el tema. Use el inspector web en el navegador para identificar las clases de destino. Ahora, cuando actualiza la pantalla, el menú se ve un poco mejor:

Los elementos del menú ahora están en el lugar correcto, pero los iconos deben estar a la izquierda de cada elemento de menú, no sobre él.
Arregle esto agregando lo siguiente a la hoja de estilo:
Carga 1E446D1349F71CF607B199E5F3A10FCE
Utiliza pseudo-elemento :: antes de que esa fuente impresionante se suma a cada elemento al que asignas las clases. En este caso, hacemos que el contenido de pseudo elemento flote a la izquierda, lo que significa que el icono aparecerá en el lado izquierdo del texto del menú. Ahora guarde la hoja de estilo y actualice la pantalla. Los íconos estarán en el lugar correcto:

Los íconos están en el lugar correcto ahora, pero podrían hacerlo con el arreglo. Agreguemos más estilo para un margen y ancho. Edite la declaración para el pseudoelemento que acaba de agregar en la hoja de estilo, para leer lo siguiente: Cargue la idea 5C4F7D9BABC0F49FB40BAC9B3C683596
Agrega un margen sobre el elemento para alinearlo con el texto y también le da un ancho fijo, de modo que haya un espacio entre él y el texto, pero el texto se alineará. Ahora tu menú se verá así:
Es mejor de esta forma. Ahora, el último paso es ajustar la fuente para el texto del menú. Agregar clases increíbles a cada elemento de menú ha cambiado la fuente utilizada para el texto, así como para los iconos, por lo que tenemos que cambiar esto. Agregaré estilo para el enlace en cada elemento en la lista de menú, porque esto no afectará a los iconos y usaré la fuente en el tema veinte -twelve. En la hoja de estilo, agregue eso:
Cargue la idea 4C68F69EC4D210D5A7B15F6896B278C1

Esto se dirige al enlace desde cualquier elemento de menú al que se han dado las clases FA y Face-LG y ajustar la fuente y el tamaño de la fuente. Esto es en lo que consistirá la hoja de estilo final:
Cargue la idea 40637E3F0288BC21F5F686306CE9699
Ahora el menú se ve como debería:

¡Ahora mi menú de navegación está completo!Resumen Agregar íconos a su sitio es un proceso muy diferente de lo que fue hace un año o dos.Ahora, en lugar de cargar imágenes y usar el estilo para colocarlas en el fondo de los elementos de la página, puede agregar iconos utilizando una biblioteca de iconos basada en fuentes.En esta publicación, aprendió a usar la biblioteca Font Awesome para agregar iconos a los elementos del menú y luego un estio para que la fuente de texto se ordene como debería.¿Puede usar esta técnica con otros elementos en su sitio, como listas, avisos y botones, simplemente utilizando las clases CSS ofrecidas por la biblioteca Font Awesome? ¿Utiliza iconos de menús?Háganos saber en los comentarios a continuación.
Etiquetas:
código
menús