Cómo usar correctamente para las fuentes de iconos de WordPress: Obtenga el mejor rendimiento (2022)

Hoy en día, los sitios web tienen que ver con el impacto visual, y los íconos de WordPress son una forma maravillosa de lograr esto. En los primeros días de diseño web, las bobinadas y las webdings fueron las cosas más cercanas que tenía con las fuentes de iconos. Estas fueron fuentes que reemplazaron las letras y números habituales con símbolos básicos, como flechas, estrellas, etc. Aunque eran algo engorrosos y no siempre visualmente atractivos, eran perfectamente adecuados en ese momento. Aunque aún puede encontrar alas y webdings (simplemente pasa por las fuentes disponibles en Microsoft Word o Google Pages y los encontrará), la mayoría de las personas ahora prefieren usar iconos más actualizados que están actualmente disponibles. Estos son mucho más avanzados y hay literalmente miles para elegir, y los nuevos aparecen todo el tiempo.
Este artículo explica qué son los iconos y fuentes de WordPress, dónde encontrarlos y cómo agregarlos al contenido de su sitio de manera rápida y fácil. ¿Qué son los iconos de WordPress y cómo se usan? Todos sabemos cuáles son las fuentes de texto: archivos que contienen letras y números, todos elegantes de cierta manera, como Calibri, Arial, New Times, Helvetica, etc. Del mismo modo, las fuentes de iconos son archivos que contienen grupos de símbolos gráficos (iconos) que caracteres como letras o dígitos. Los íconos generalmente incluyen cosas sobre la vida moderna, por ejemplo, redes sociales, símbolos del carrito de compras, “sobres”, teléfonos, etc. ¡Ah, y no nos olvidemos de las emociones humildes!
La ventaja de los iconos de WordPress hacia las imágenes es que son gráficos vectoriales. Esto significa que son infinitos escalables, sin pérdidas de calidad: puede hacerlas tan grandes como desee, sin problemas de píxeles. Además, es fácil cambiar su color y, en comparación con otros tipos de imágenes, son ligeramente fáciles. Los diseñadores de sitios web prefieren especialmente las fuentes de iconos, porque pueden diseñar como CSS de la misma manera que el texto habitual. Los íconos generalmente se usan en lugar del texto, porque: ocupa menos espacio que el texto, lo cual es muy importante para los dispositivos móviles.
A menudo se explica ellos mismos y pueden ser entendidos por hablantes no nativos.
Proporciona un mayor impacto visual que el texto
Haga que los sitios sean más fáciles para los ojos, porque los sitios de texto pesado no solo son aburridos, sino que son bastante difíciles de leer.
Por ejemplo, los sitios comerciales electrónicos a menudo usan el símbolo del carrito de compras, porque se reconoce al instante. Del mismo modo, el icono del sobre generalmente se entiende como un significado “envíenos un correo electrónico”, mientras que el símbolo del teléfono se explica por sí mismo. Y si observa la parte superior derecha del sitio web de Wplift, notará el icono de lupa, haciendo clic en el que se muestra la barra de búsqueda.
El artículo continúa a continuación

¿Dónde puedo encontrar iconos y fuentes de iconos? Hay muchas fuentes de fuentes para los iconos de WordPress disponibles, tanto gratuitos como premium. Aquí hay solo una pequeña selección de ellos: Fuente impresionante
Font Awesome es probablemente la fuente de iconos más conocida. Esto no es una coincidencia, porque actualmente ofrece más de 2,000 artículos gratuitos y más de 16,000 productos profesionales en 68 categorías, ¡incluso tienen algunos animados! Además, agregan continuamente nuevos. Font Awesome llama a las fuentes para iconos de “kits”. Obtiene un kit y acceso a todos los íconos gratuitos en el plano gratuito. Para USD 99 al año, puede actualizar a “Pro”, que incluye 20 kits y acceso a íconos gratuitos y premium. Encontrar todos los iconos que necesita debe ser fácil con Font Impress. De hecho, incluso la biblioteca gratuita puede ser suficiente para muchas aplicaciones. También tienen una sección de ayuda muy detallada para ayudarlo a aprovechar al máximo sus íconos. Prueba Font Awesome Fontello

Fontello no solo le permite crear fuentes de iconos utilizando una biblioteca de iconos de código abierto, sino que también le permite agregar iconos o imágenes SVG personalizados. Además, Fontello también tiene una sección de ayuda detallada para guiarlo en la creación de fuentes de iconos.
Lo mejor de Fontello es que es completamente gratis. Prueba Fontello Icomoon

Icomoon le brinda acceso a más de 5,500 iconos gratuitos y más de 4,000 iconos premium, además de que puede importarlos. Puede crear sus propias fuentes de iconos para usar en su sitio de WordPress. Si bien Icomoon tiene un avión libre, almacena todo localmente en el navegador. La desventaja es que pierde todo cada vez que elimina el caché del navegador. Puede evitar este problema comprando un plan remunerado que almacene todo en “proyectos” en su cuenta adicional, los planes pagados, que cuestan desde $ 9 por mes, incluyen acceso a iconos premium, lo que le brinda una mayor flexibilidad al crear fuentes de iconos. El El artículo continúa a continuación
Prueba con Icomoon del tamaño de los bytes

Bytesize puede contener solo 101 iconos, pero esto lo hace súper rico, con un peso de solo 11.7 kb minimizado o 3.2 kb como SVGZ. Además, es posible ajustar el peso, el color y el tamaño de cada icono, además de que puede elegir entre bordes redondos o cuadrados. A pesar del hecho de que no tienen miles de íconos ofrecidos por Font Awesome, etc., la bytesis cubre muchas aplicaciones diarias modernas. Lo mejor, es gratis. Pruebe bytese 3 formas de usar fuentes de WordPress. Le diré algunas formas de agregar fuentes de iconos a su WordPress rápido y fácil.

Para mantener las cosas amigables para principiantes, he tratado de evitar los métodos que le piden que se confunda con cosas como el código, CSS o Funcions Functions.php, este último, si se hace incorrectamente, puede devastar su sitio 1 Opción 1 – Use use De increíbles iconos de fuentes incluidos en el elemento si usa Elementor, disfrute de un mimo real, porque ese generador de páginas ya integra iconos impresionantes de fuentes. Esto significa que tiene acceso gratuito a aproximadamente mil quinientos iconos. Además, si tiene una suscripción profesional Font Awesome, también puede acceder a ellos desde Elementor. Para acceder a las fuentes de iconos, todo lo que tiene que hacer es escribir “icono” en la barra de búsqueda. Luego extraiga el bloque de iconos donde lo necesite en el contenido. Luego llame a la biblioteca de iconos haciendo clic en el icono en el panel “Editar el icono”:

Al ajustar la configuración en las pestañas “avanzadas” y “estilo” en el editor de iconos, puede personalizar los iconos como desee. Además, puede cargar sus propios iconos SVG. Opción 2: el uso de fuentes de iconos disponibles en los valores predeterminados de Gutenberg, Gutenberg incluye solo unos pocos iconos sociales, a los que puede acceder escribiendo “icono” en la barra de búsqueda “Bloques”:

El artículo continúa a continuación
Sin embargo, es posible agregar muchos más y verá qué está disponible para instalar bajo el resultado de la búsqueda:

Al hacer clic en cualquiera de los dos, instalará un nuevo bloque (s) desde los cuales podrá acceder a muchas fuentes de iconos:

Es posible personalizar los iconos. Comience haciendo clic en el icono de la rueda en la parte superior derecha de la pantalla. Luego, haga clic en la pestaña “Bloquear”, luego ajuste las diversas configuraciones que aparecen como desee: Opción 3 – Uso de un complemento de fuentes de WordPress Hay más complementos de WordPress, especialmente para ayudar a agregar fuentes de iconos a su contenido.

Una de las más populares es Font Impresionante, producida por las mismas personas que nos traen íconos increíbles. Sin embargo, no lo discutiré aquí porque me resultó difícil configurar y usar. Además, hay muchos tutoriales para la fuente de complementos impresionantes disponibles en Internet. En cambio, hablaré de WP Font Awesome. Este complemento gratuito le permite agregar y personalizar iconos impresionantes de fuentes usando códigos cortos simples. Una vez instalado y activado, no requiere configuración. Además, a diferencia del complemento Font Awesome, ni siquiera tiene que registrarse en el sitio web Font Awesome para usarlo. Hay tres tipos de códigos cortos en WP Font Awesome:


Estilo sólido: [wpfa5s icon = “home” size = “3x” color “#336699 ″]
Estilo ordinario (compatible solo por iconos limitados) [WPFA5R icon = “user” color = “rojo”]]
Marcas: [WPFA5B icon = “WordPress” size = “5x” color = “#3B5998”].

Puede cambiar el tipo, el tamaño y el color del icono reemplazando el contenido de cada conjunto de citas. Por ejemplo, crearé tres iconos de la siguiente manera:
Un icono de auto de estilo sólido, tamaño 10x y color naranja
Un icono de la libreta de direcciones, tamaño de 5x y tamaño rojo
Un logotipo de FedEx, tamaño 3x y color púrpura, pero esta vez usando el código de color hexadecimal. A continuación se muestra una captura de pantalla que muestra los códigos cortos ingresados ​​en una publicación usando los códigos cortos en Gutenberg:
Y los tres iconos completados se ven así:
Para obtener un código hexadecimal para un color, puede usar un sitio como htmlcolorcodes.com.Si desea elegir un color de una imagen, use algo como ImageColorPicker.com para obtener el código hexadecimal correspondiente.Puede encontrar el nombre de cada icono en el sitio web Font Awesome, aunque a menudo puede adivinar muchos de ellos.WP Font Awesome le permite colocar íconos prácticamente en cualquier lugar de su sitio, incluidos menús, widgets, publicaciones, páginas y títulos.Fuentes de icono y velocidad del sitio Hay una desventaja en el uso de fuentes de iconos en su sitio:
La hinchazón adicional que traen puede afectar la velocidad. La razón de esto es que si se conecta a una biblioteca externa o usa un complemento, a menudo se descarga toda la biblioteca de fuentes de iconos. Este no es un uso muy efectivo de los recursos, especialmente si usa solo unos pocos íconos en una fuente de varios cientos. Otra razón por la cual las fuentes de iconos pueden afectar el rendimiento de su sitio es que la carga de múltiples CDN será obviamente más lenta que la carga de uno. Esto se debe al hecho de que se necesitan varias conexiones HTTP/2 y numerosas búsquedas de DNS, todas las cuales pueden disminuir. Si le preocupa mucho que las fuentes de icono ralenticen su sitio, su instalación local en su propio CDN o en su host de WordPress probablemente sería la mejor opción. Esto le permitirá seleccionar solo los iconos que necesita, lo que reduce en gran medida el tamaño total del archivo. Además, podrá elegir y elegir íconos de varias bibliotecas de diferentes iconos. Visite el artículo de Wplift “Cómo alojar a Google Fonts Local en WordPress (u otras fuentes también.