Fuentes de icono de WordPress: ¿qué son y cómo usarlas (manualmente/complemento)

Las fuentes de iconos pueden ser una herramienta muy útil para los sitios de WordPress. Le permiten agregar símbolos e imágenes a su sitio web sin ralentizarlo. Esta y otras razones son la razón por la cual las fuentes de iconos se han vuelto populares en los últimos años. Si no está seguro de este tema, esta publicación de blog está aquí para ayudarlo. En esto, descubrirá cuáles son las fuentes de iconos y por qué es una buena idea usarlas. Después de eso, recibirá instrucciones paso a paso sobre cómo agregar fuentes de iconos a su sitio de WordPress, tanto manualmente como a través de complementos.
¿Suena bien? Entonces vamos a romper. ¿Cuáles son las fuentes de icono y por qué usarlas? Antes de hablar sobre cómo usar las fuentes de iconos en WordPress, primero determinemos cuáles son. Contienen símbolos en lugar de letras, como su nombre indica, las fuentes de iconos son fuentes y otras fuentes personalizadas. Sin embargo, en lugar de letras y números, contienen símbolos e íconos. De hecho, cada sitio de WordPress está equipado de forma predeterminada con una fuente de icono. Se llama Pashicons y ofrece símbolos en el menú principal de WordPress.

Sin embargo, hay muchas más opciones allí. La mayoría de ellos incluyen íconos web habituales, como carros de compras, botones de descarga, redes sociales y más. Las bibliotecas a menudo contienen cientos de opciones diferentes, muchas de ellas gratis. Aquí hay varios ejemplos:
Font Awesome: una biblioteca con más de 1.300 símbolos gratuitos. Cubren una amplia gama de temas, desde flechas hasta salud, educación, marcas y más.
Genericons: una colección de iconos genéricos hechos por automáticamente. Puede encontrar los archivos en github.fontello-Este servicio combina varias fuentes de iconos en un solo lugar y le permite crear bibliotecas que contienen solo los símbolos que necesita, guardando espacio en este proceso.
Puede encontrar fuentes adicionales para íconos aquí y en este artículo. Aprenderá a usarlos en un segundo.
Las ventajas de usar las fuentes de icono Esto solo deja la pregunta, ¿por qué usaría fuentes de iconos? ¿Por qué no ir con fotos? Parece que, a diferencia de las imágenes tradicionales, las fuentes de iconos ofrecen más beneficios:
Como imágenes vectoriales, se escalan en cualquier calidad sin pérdidas de calidad. Una excelente característica para el diseño receptivo.
Al igual que otros textos web, puede manejar fácilmente las fuentes de iconos a través de CSS. Por ejemplo, puede cambiar su tamaño y colores, agregar sombras, girarlas y más.
Le permiten almacenar más símbolos en un solo archivo. Esto reduce las solicitudes HTTP en comparación con cargar más imágenes.
Las fuentes de iconos no aumentan significativamente el peso de la página, especialmente si usa una biblioteca con los iconos que necesita. ¡Buenas noticias para el tiempo de carga de su página!
De acuerdo, ahora sabes por qué es una buena idea usar fuentes de iconos de WordPress, veamos cómo puedes agregarlas a tu sitio.
Cómo agregar manualmente las fuentes de iconos a WordPress primero abordaremos cómo incluir manualmente las fuentes de iconos en WordPress. Esta es la mejor solución al crear un tema en el que desea usar fuentes de iconos. Le permite trabajar sin un complemento que un usuario o un cliente podría cambiar o eliminar de manera inapropiada. También hay dos formas diferentes de lograr esto. Para todo el tutorial, usaremos Font Awesome mencionado anteriormente. Es la biblioteca más popular y tiene muchos símbolos gratuitos. Sin embargo, los principios de lo que va a aprender a aplicar a otras fuentes de iconos. Moseta 1: coloque la fuente en una cola de distancia Las fuentes de icono se pueden agregar a su sitio como cualquier otra fuente personalizada: cargándolos desde un servidor remoto . Todo lo que necesita para esto es la dirección donde están alojados. Font Awesome ofrece su propio CDN para esto, que puede encontrar y configurar aquí.
Una vez que tenga la dirección, simplemente agregue la fuente a su sitio con la siguiente pieza de código en el archivo Functions.php del tema: NS_ADD_FONT_AWASE () {
wp_enqueue_style (‘ns-font-weom’, ‘https://use.fontawesome.com/releases/v5.3.1/css/all.css’);

}
add_action (‘wp_enqueue_scripts’, ‘ns_add_font_awesome’); WordPress luego cargará la fuente impresionante desde la ubicación remota en su sitio.
Método 2: aloje las fuentes alternativas usted mismo, también puede alojar los archivos de fuentes en su propio servidor. Esta puede ser una buena idea para reducir las solicitudes HTTP o debido a las preocupaciones de GDPR. El primer paso para este método es descargar la fuente y no me gusta. Para Font Awesome, busque el enlace de descarga en el mismo lugar que la dirección CDN, solo a continuación en la página. Una vez en el disco duro, descomprima el archivo e inicie el cliente FTP (por ejemplo, FileZilla). Vaya a su carpeta de tema activo en temas WP-Content>. Allí, cree un nuevo director y dale un nombre distinto, como fuentes, luego cargue todo lo que acabas de descargar. Después de eso, cargue la fuente en su sitio con este código de código dentro de las funciones.php: function ns_add_font_awesome () {
wp_enqueue_style (‘ns-font-awesome’, get_stylesheet_directory_uri (). ‘/fonts/css/all.min.css’);
}
add_action (‘wp_enqueue_scripts’, ‘ns_add_font_awesome’); Visualización manual de fuentes de iconos Una vez que las fuentes están presentes, solo tiene que descubrir cómo mostrar símbolos en su sitio para esto, debe acceder a la lista de increíbles símbolos de fuentes. Haga clic en cualquier icono que desee usar. Esto le dará el nombre y el código requeridos para colocarlo en su sitio.
Para el ejemplo anterior, se ve así.
Cuando lo tomas ahora y lo introduces en algún lugar de tu sitio (por ejemplo, el sótano), lo obtienes:
También puede cambiar el estilo del icono agregando algunos CSS a su hoja de estilo. .fa-twitter {

Tamaño de fuente: 38px;
Color: #222;


}
.fa-twitter: hover {
Color: #767676;
} Para facilitar las cosas, también es posible agrupar más iconos dentro de otro elemento HTML, como sigue:
<



De esta manera, puede cambiar el estilo de todos los iconos simultáneamente. Para el ejemplo anterior, se vería así:
.Social-icoana-group i {
Tamaño de fuente: 38px;
Color: #222;
}
.Social-icon-group i: hover {
Color: #767676;
} Además, también tiene oportunidades de estilo más complejas, como el tamaño, el uso de ancho fijo, rotación y más. Sin embargo, en su mayor parte, eso es todo. Ahora está listo para usar fuentes de iconos en su tema de WordPress. Agregar fuentes de iconos a través de un complemento de WordPress, por supuesto, WordPress también le permite usar fuentes de iconos a través del complemento. Esta es la mejor solución si desea usarlas en sus publicaciones y páginas o dar a los clientes la oportunidad de hacerlo. Hay una serie de complementos de WordPress que ayudan a esto como:
Wow iconos
Iconos de WP SVG
Generado
Lista de íconos
Sin embargo, para este tutorial, utilizaremos una mejor fuente impresionante. No es solo la solución más popular, sino también fácil de usar y actualizada. 1. Instale el complemento, por supuesto, lo primero que debe hacer es instalar el complemento en cuestión. Para hacer esto, vaya a complementos> Agregar nuevo e ingrese su nombre en la barra de búsqueda. Cuando lo encontró en la lista, haga clic en Instalar ahora. Active el complemento cuando haya terminado de descargar. 2. Configure la configuración del complemento Una vez activado, busque la configuración de configuración del complemento en> Mejor fuente impresionante. Las opciones disponibles son bastante explícitas y, en la mayoría de los casos, puede dejar todo tal como está. En la parte inferior, ya encuentra instrucciones sobre cómo agregar símbolos a su sitio más al respecto ahora. 3. Agregue iconos a su sitio con el complemento instalado, puede agregar fuentes de iconos a su sitio de WordPress a través de códigos cortos útiles, como este: [icon name = “twitter” class = “fa-2x”] solo ingrese el código donde sea Quieres que aparezca el ícono. Además, teóricamente, puedes usar la misma como antes. Sin embargo, en mi prueba, eso no funcionó. En ambos casos, como antes, debe saber el nombre del icono que desea agregar a su sitio de WordPress para hacerlo. Además, el complemento también agrega una nueva opción para agregar iconos al editor de WordPress. Simplemente haga clic en el botón y busque el símbolo que desea agregar por nombre.
Otro clic, luego inserte en publicación o página con un código corto como este: [icon name = “twitter” class = “” impixed_class = “”] Puede usar unpaprefi_class = “” para agregar su propia clase a Unpapixed_class = “” The íconos. También puede usar class = “” Pero en este caso, el complemento agregará automáticamente la cara frente al nombre de su clase, así que tenga en cuenta ello. Además, tenga en cuenta que aún no se ha actualizado una mejor fuente impresionante para proporcionar el botón en Gutenberg. Sin embargo, los códigos cortos mencionados anteriormente también funcionan en el nuevo editor de WordPress. Las fuentes para los iconos y la accesibilidad, una desventaja de las fuentes de iconos es que no son los mejores para la accesibilidad. A menos que estén entrenados para ignorarlos, los lectores de pantalla pueden leer Unicode o el nombre de los caracteres de ícono. Debido a que esto está confundido para los visitantes con discapacidades visuales, es una buena idea abordar este problema. Una solución es agregar el parámetro aria-hidden = “true” a las fuentes del icono, como: