Cómo agregar maravillosos iconos de fuentes en WordPress manual o con complementos

¿Alguna vez has visto estos íconos inteligentes en los sitios de WordPress de otras personas? Aquellos que atraen su atención y le brindan un contexto adicional para lo que mira. Lápices, hamburguesas, el tipo de cosas … ¿Sabes, los gráficos que se ven así?

Si no has vivido en una cueva, estoy dispuesto a apostar que te diriges desde este momento. Se han vuelto populares porque soy una forma inteligente de agregar carácter y contexto en su sitio de WordPress. Sí, no son solo por diversión, sino que en realidad tienen algunos beneficios muy reales para la experiencia del usuario que discutiré a continuación.
Luego, después de los beneficios, le mostraré cómo agregar iconos increíbles a WordPress tanto manualmente como con algunos complementos útiles. ¿Qué es la fuente increíble? Font Awesome es un conjunto de íconos populares, con apariencia moderna. Esencialmente, hay miles de iconos diferentes combinados en un solo paquete, que luego puede ingresar en su sitio de WordPress. Los íconos increíbles de la fuente son geniales porque funciona como cualquier fuente ordinaria que uses. Eso significa que son:
Compatible para todos los navegadores.
Vectores (es decir, puedes cambiarlos tanto como quieras sin perder calidad)
Fácil de peluquera. En esencia, puedes tratarlos como una “fuente” regular. Es decir, puede cambiar fácilmente los colores según sea necesario.
También es fácil agregar iconos increíbles a WordPress, gracias a una gran base de asistencia.
¿Cuáles son los beneficios de usar el uso de iconos como Font Awesome? Al principio, pensé que los íconos increíbles de fuentes hacían que su sitio se viera muy bien. Pero luego pensé en cómo navego por la web en este mundo centrado en el mundo. Y eso me hizo ver la utilidad de los íconos como Font Awesome. ¿Y qué sabes? Los investigadores icónicos (!) De la experiencia de los usuarios Nielsen Norman Group (NNG) se han profundizado en este problema. Parece que cuando incorpora íconos en el diseño de su sitio web, no solo se ve genial. También está: facilitar a los lectores para hacer clic en las opciones en el menú. Aunque esto es especialmente beneficioso para los dispositivos basados ​​en el tacto, no es que también se aplique a los dispositivos basados ​​en el mouse.
Usando menos espacio. Los íconos le permiten usar menos texto y, por lo tanto, condensar sus menús.
Deje que los lectores comprendan las opciones de menú más rápido. Por ejemplo, todos sabemos que el icono de “lápiz” significa “edición”.
Internacionalización de su sitio web. Como arriba, no solo los usuarios que hablan en inglés saben lo que significa el icono de lápiz.
Pero cuando use íconos, recuerde siempre que debe continuar proporcionando una etiqueta de texto para acompañarlos. Muchas investigaciones dicen que los únicos íconos pueden confundir a los lectores. Pero cuando los incluye como parte de la estructura de su página, mejoran el grado de uso y hacen que su página sea más estéticamente agradable.
Cómo agregar iconos maravillosos para las fuentes de WordPress bien manualmente, por lo que puede usar un complemento para agregar iconos impresionantes de fuentes. Le permitirá insertarlos en WordPress usando códigos cortos, aunque aún tendrá que estilizarlos manualmente. Cubriré esto en la siguiente sección. Pero para aquellos de ustedes que prefieren un enfoque más práctico, en realidad es muy fácil ingresar manualmente a los iconos increíbles. Esencialmente, todo lo que tiene que hacer es agregar la hoja de estilo impresionante de la fuente a su sitio, luego puede insertar y estilizar los iconos con CSS. Entremos en esto … Paso 1: Conecte una hoja de estilo de fuente impresionante en funciones.php Font Awesome Style Sheet es una lista constantemente actualizada de los últimos iconos. Puede agregarlo a su sitio de una de dos maneras:
Descargue la última hoja de estilo de fuente increíble y cárguela a su sitio a través de FTP.
Inicie sesión en la versión alojada por Bootstrap CDN (hice esto sin problemas).
Independientemente de la opción que elija, los siguientes pasos serán los mismos. Lo único que cambiará es la URL real de la hoja de estilo. Para descargar la hoja de estilo, vaya aquí, luego cárguela a su sitio a través de FTP y copie la ruta del archivo.
De lo contrario, use solo esta URL en la hoja de estilo externo del CDN: https://maxcdn.bootstrapcdn.com/font-wesation/4.7.0/css/font-wesome.min.css Entonces, debe agregar este código a las funciones de funciones.php del tema de su hijo (¡espero que uses un tema infantil!). add_action (‘wp_enqueue_scripts’, ‘enqueue_load_fa’); Function encue_load_fa () {wp_enqueue_style (‘load-fa’, ‘https://maxcdn.bootstrapcdn.com/font-wesation/4.7.0/css/font-wesome.min.css’); } Si ha cargado la hoja de estilo en su sitio, todo lo que tiene que hacer es reemplazar el enlace a Bootstrap CDN con la URL de la lámina de estilo en su sitio, debe verse así:
Mientras que algunas personas le dirán que solo ingrese el enlace a la hoja de estilo en el archivo Header.php, no lo haga. Aunque probablemente funcionará, su extinción es la forma correcta de hacerlo.
Paso 2: Agregar maravillosos iconos de fuentes de WordPress Después de agregar la hoja de estilo, está listo para comenzar a incluir iconos impresionantes de fuentes en WordPress. Es realmente bastante simple. Para agregar cualquier icono básico, solo necesita este fragmento de código:
Entonces, ¿dónde encontrar los iconos de nombre? Fácil, simplemente acceda al sitio impresionante de la fuente y navegue o busque iconos:

Si hace clic en un icono, llegará a su página dedicada. Luego desplácese hacia abajo y busque el código HTML:

Si desea usar los iconos en las publicaciones, deberá asegurarse de agregarlos a la pestaña Texto del editor de WordPress. Por ejemplo, esta adición a la pestaña de texto:
Predecir esto en front y:

Paso 3: Fuente de estilo Iconos impresionantes Como puede ver en el ejemplo anterior, el tamaño de icono predeterminado es muy pequeño. La mayoría de las veces, querrás que tus íconos sean un poco más grandes. Afortunadamente, es muy fácil de ver con CSS (¡recuerda cómo te dije que es como una fuente!).

Para que su icono sea más grande, solo tiene que agregar una simple adición a la clase de iconos. Por ejemplo, para hacer el icono de la agenda que usé anteriormente tres veces más grande, solo tienes que agregar “FA-3X” al final de la clase como: FA-3X “> y eso te da esto :

También puede rotar íconos, iconos de anima y más. Para obtener una lista completa de todas las manipulaciones que puede hacer, debe ver la página de ejemplos impresionantes de fuentes. Cómo agregar íconos maravillosos a WordPress con un complemento Si no desea hacer las cosas manualmente, también puede usar un complemento llamado Better Font Awesome.

Para ser honesto, no creo que te salte tanto tiempo haciendo las cosas manualmente. Pero le ofrece un lindo constructor de código corto en el editor de WordPress. Es un complemento gratuito, por lo que puede instalarlo y activar directamente desde el tablero de WordPress:
Una vez activado, no hay más para configurar. Verá un nuevo generador de códigos cortos insertar en el editor de WordPress. Simplemente haga clic en él, filtre sus iconos e ingrese la elección deseada:

Para estilizar sus íconos, deberá usar las mismas clases que le mostré para el ejemplo manual anterior. Por ejemplo, para hacer el icono 3x más grande, debe agregar esta clase a la código corto: el hecho de que aún tenga que estilizar manualmente los iconos es por qué no encuentro el complemento mejor que la opción manual. Agregar maravillosos iconos a los elementos del menú Si desea agregar iconos increíbles a los elementos del menú Real WordPress, hay otro buen complemento llamado menús Font Awesome 4. Una vez que lo active, puede agregar iconos impresionantes de fuentes a los elementos del menú ingresando solo el nombre impresionante de fuentes en el cuadro de clase CSS (opcional):
Como todas las demás opciones, puede usar las mismas opciones de estilo para aumentar el tamaño de los iconos, animarlos o más. Si no ve de inmediato el cuadro de clase CSS, es posible que deba acceder a las opciones de pantalla y activarla:

Escribir cosas que agregan iconos increíbles a WordPress es una excelente manera de mejorar la estética de su sitio y facilitar la navegación de los usuarios. Mi preferencia personal es agregar manualmente manualmente extrayendo la hoja de estilo al archivo de funciones.php de su hijo. Si desea alguna otra forma de mejorar las fuentes en su sitio web de WordPress, le recomiendo que también consulte a nuestra guía para Google Fonts y WordPress. Y lea esto si desea obtener más información sobre CSS para comprender un poco cómo funciona el estilo increíble.