¿Cómo crear y usar iconos para WordPress?

Para hacer que los sitios sean más fáciles de navegar, la mayoría de los programadores han recurrido al uso de imágenes; de hecho, no son solo elementos gráficos, como puede ser el logo, sino que cumplen la importante función de ayudar al usuario a navegar por el sitio, ya que se interpretan de inmediato. Es por ello que hoy queremos enseñarle cómo crear iconos para WordPress, para que la navegación en su sitio sea mucho más fácil y divertida.

Si usted desea que la navegación en su sitio sea amena fácil de comprender, es necesario que conozca los iconos de WordPress gratis, o en su defecto los plugins; porque esta es un estupenda manera de transmitir las ideas que algunos podrían considerar complejas, de una forma más sencilla, gracias a estos elementos visuales que le facilitan las cosas, y con los que los usuarios logran interpretar mejor que en un texto incomprensible.

Es por ello, que los plugin de iconos de WordPress son hoy en día un estándar, no solo para esta plataforma, sino para muchas otras; y es por eso que en la actualidad, tanto un niño como un adulto saben que por ejemplo la imagen de una casita le lleva directamente al inicio de la página web, o un botón con un sobre sirve para enviar un mensaje, y los de las redes como Instagram, Facebook o Twitter, le van a permitir compartir su publicación en cada una de ellas.

Está demostrado por los especialistas en esta área, que las páginas que cuentan con iconos son mucho más atractivas, pero sobre todo, mucho más dinámicas; porque al darles un efectivo uso a estas imágenes, son un excelente aporte para la accesibilidad de su página web, y la manera de navegar en ellas es mucho más expedita que cualquier otra que no cuente con este recurso.

¿Qué son los iconos en WordPress y para qué se utilizan?

Aunque muchas personas los utilizan y han visto en multitud de aplicaciones, desconocen que los iconos en WordPress y en cualquier otra plataforma, no son más que pictogramas que representan una idea, y se han popularizado con la evolución de la informática, en donde en un principio se emplearon para representar unidades de almacenamiento, carpetas, papeleras, entre otros, pero con el tiempo son indispensables en cualquier aplicación.

Solo tiene que ver la pantalla de su móvil y ordenador, para que pueda constatar que ambas están llenas de ellos, y es porque son una excelente ayuda visual que le permite conseguir de manera expedita, lo que esté buscando.

Los iconos en WordPress por lo general se emplean en los menús como elemento de navegación, tal y como le mencionamos antes, son una excelente ayuda para encontrar cosas; pero también son utilizados para realizar tareas, y hasta para representar gráficamente el estado de ánimo de alguna persona, como es el caso de la sonrisa, tristeza, agotado, caluroso, entre otros.

Si usted usa WordPress es un afortunado, porque esta plataforma trae consigo una fuente de iconos  llamada Dashicons, la cual puede utilizar fundamentalmente para los iconos del escritorio; asimismo incluye los conocidos emoticones básicos, pero si usted quiere destacar por ellos, es muy probable que le queden cortos.

Como le mencionamos al inicio de este post, los iconos en WordPress son una excelente estrategia que le permite comunicar más de una palabra en una sola imagen; es por ello que recomendamos ampliamente que usted los agregue en el menú de su sitio.

Tipos de iconos para WordPress

Las imágenes son ayudas visuales que hacen más fácil el trabajo, y es por ello que el mejor uso que usted le puede dar a los iconos en WordPress, es precisamente el de crear botones de call to action o llamada a la acción, que le van a facilitar la navegación en su sitio web.

Cuando se trabaja con internet, es muy buena idea contar con iconos, porque de esta manera no sólo se logra que el lector haga lo que usted desea, sino que no se pierde tiempo, porque la persona sabe que pulsando un botón, este le va llevar directamente a dónde quiere ir. Por esta razón, es súper importante que se decida, y comience a utilizar los iconos en WordPress.

Fuentes de iconos: Font Awesome para WordPress

Este es un framework de iconos vectoriales que le permite que usted trabaje con éstos tal y como si fueran fuentes; esto representa una ventaja, cuando se trata de aumentar la velocidad en su sitio web.

Al ser imágenes vectoriales, estas se pueden escalar a cualquier tamaño, sin que se pierda la calidad de las mismas; y en cuanto al diseño responsive, resulta ideal para el uso de pantallas de tipo Retina.

Tal y como sucede con la mayoría de los textos web, usted puede trabajar con ellas a través de CSS, cambiar tamaño y color, rotarlas, darles sombra, entre otras cosas. Además de ello, tiene la ventaja que usted puede almacenar una gran cantidad de iconos en un solo archivo. Y por si esto fuera poco, las fuentes de los iconos para WordPress no incrementan el peso de la página, y mucho menos si usted emplea una biblioteca con los que más utiliza.

¿Quiere agregar íconos de fuentes en su blog de WordPress? En este tiempo en que pasamos más tiempo en casa, todos quieren personalizar más su blog para ofrecer una mejor imagen a sus lectores y visitantes, y los iconos de fuentes son parte de los arreglos que se hacen regularmente.

Los caracteres de iconos se pueden usar para mostrar símbolos bastante comunes, en un sitio web clásico, puede usarlos para mostrar el icono del carrito de compras, botones de descarga, cursores, botones de redes sociales e incluso menús de navegación de WordPress.

Hay varios iconos de fuentes con diferentes opciones. De hecho, cada instalación de WordPress usa Dashicons, como lo mencionamos antes, que es un conjunto de caracteres; y estos iconos se usan en la barra de usuario del tablero.

Para realizar este post utilizamos Font Awesome, que también es uno de los iconos de fuentes más utilizados, y además de ello son gratuitos.

Exploraremos agregar iconos de fuentes en el tema de WordPress. El primer método se realiza utilizando un complemento y también le mostraremos cómo hacerlo sin un complemento.

Cómo agregar iconos de fuentes con un complemento de WordPress

FontAwesome es compatible con varios complementos, el uso de un complemento le permite agregar fácilmente un icono de fuente al tema sin tener que cambiar el código fuente.

Lo primero que debe hacer es instalar y activar el complemento Best of character, disponible en WordPress.org; y luego de ello, activar el complemento, por lo que tiene que ir a la siguiente ruta: “Configuración> Mejor fuente impresionante”, para configurar el complemento. Sin embargo, este complemento puede funcionar sin configuración, por lo que los usuarios realmente no necesitan cambiar nada.

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Por eso nuestra recomendación es, deje de pagar un alto precio por lo que puede hacer usted mismo y gratis.

Este complemento le permite agregar iconos de caracteres de la siguiente manera:

  • [nombre del icono = »cohete»]
  • [icon name = “cloud”]
  • [nombre del icono = »auriculares»]

Puede agregar iconos a la interfaz de edición de artículos eligiendo entre los iconos disponibles, solo tiene que simplemente crear un nuevo artículo y verá el icono “Insertar botón de icono” en la barra de herramientas del editor visual.

Al hacer clic en él, se abrirá una nueva ventana donde puede ubicar un icono e insertarlo, y de inmediato notará el complemento agregará un botón similar a este

  • [icon name = »university» class = »» unprefixed_class = »»]
  • Si desea agregar más opciones de personalización, puede agregar su clase para un estilo personalizado.
  • [icon name = “university” class = “myclass” unprefixed_class = “”] Así es como personalizará la clase de su icono:
  • .FA-myclass {font-size: 100px; color: # FF6600

Es realmente simple, solo tenga en cuenta que la clase está precedida por “fa-“. Por lo que no puede olvidar agregarlo a su código CSS.

Cómo agregar manualmente una fuente de icono en WordPress

Ahora es momento de mostrarle cómo agregar manualmente una fuente de iconos de WordPress a su blog.

Algunos íconos de fuentes como Font Awesome están disponibles a través de servidores CDN en todo el mundo y se pueden vincular directamente a su blog; asimismo, puede enviar los archivos de este icono de fuente directamente a su carpeta de temas de WordPress. Le mostraré cómo agregar el icono de fuente Font Awesome en su blog.

Primer método

Este es el método más fácil, solo tiene que agregar esta línea a la sección “<head>” de su tema (generalmente se encuentra en el archivo header.php).

  • <Link rel = “stylesheet” href = “https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css” />7

Este método es simple, pero puede causar muchos conflictos con otros complementos. El mejor enfoque es cargar los scripts de WordPress para agregarlos a la cola.

  • Función Wp_load_fa () {wp_enqueue_style (‘WPB-fa’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css’)};  add_action (‘wp_enqueue_scripts’, ‘wp_load_fa’)

Segundo método

El segundo método no es el más simple, pero le permite tener personajes icónicos en su tema. Todo lo que tiene que hacer es descargar y descomprimir el paquete de íconos de fuentes (archivo comprimido) en la carpeta “Fuentes” de su tema.

Simplemente descargue el icono de fuente y cámbiele el nombre; y lo que debe hacer a continuación es cargar la fuente del icono desde su servidor.

Ahora que está listo para cargar los iconos de fuente en su tema de WordPress, solo necesita agregar el siguiente código al archivo “functions.php” de su tema de WordPress o en su Plugin de WordPress.

  • Wp_load_fa () function {wp_enqueue_style (‘WPB-fa’, get_stylesheet_directory_uri () ‘/fonts/css/font-awesome.min.css.’); } add_action (‘wp_enqueue_scripts’, ‘wp_load_fa’)

Y esto es todo lo que tiene que hacer.

Cómo mostrar manualmente los iconos de fuente en tu blog

Vaya al blog Font Awesome y vea la lista de fuentes disponibles, luego haga clic en cualquier imagen y verá el código de la imagen.

Simplemente copie y pegue y el siguiente código <i class = “fa-optin-monster”> </i>

En modo editor de texto puede usar la clase para cambiar el icono de fuente.

Iconos de redes sociales en WordPress

Estos iconos para WordPress básicamente tienen dos objetivos fundamentales pero distintos

Iconos para enlazar con las redes sociales

Se utilizan para que los visitantes puedan localizar de manera expedita los perfiles sociales que estén vinculados a su marca; y por ende, que le sigan.

Iconos para compartir en redes sociales

A diferencia de los anteriores, estos iconos para WordPress le facilitan al usuario compartir el contenido de su sitio web en las redes sociales que manejen, y que empleen como estrategia de marketing.

Como puede notarlo, aunque estén estrechamente relacionadas, tienen funciones diferentes, y que no debemos confundir; ya que en el primer caso, tiene que ver con los enlaces, para que usted pueda ser localizado y mejor aún, seguido. Y en este último caso, tiene que ver con la funcionalidad al conectarse con la API de las redes sociales, las cuales trabajan para hacer una publicación de manera remota.

Emoticonos en WordPress

Cómo dijimos en la introducción de este post, el uso de iconos para WordPress y otras plataformas ha venido en aumento en los últimos años; asimismo, el empleo de emoticones en las redes sociales y en la comunicación escrita cada día es más habitual, y por ello la mayoría de las aplicaciones la utilizan para no quedarse atrás.

Por si usted no lo sabía, así como ya estamos acostumbrándonos a utilizar caritas que expresan sentimientos en WhatsApp, Twitter y otras plataformas, también lo puede utilizar estos emoticones e iconos en WordPress.

Aunque en un principio se empleaban para expresar sentimientos o estados de ánimo, como lo mencionamos; con el pasar del tiempo se ha multiplicado su uso exponencialmente, y es que son capaces de transmitir muchas palabras, en una sola imagen.

Usted puede pensar que los 22 emoticones que tiene por defecto WordPress no son suficientes para optimizar y tener a la vanguardia su sitio web; pero pierda cuidado, porque ahora también puede utilizar los tan de moda emojis, una secuencia Unicode de caracteres que por lo general son compatibles con diversas aplicaciones, entre las que está incluida WordPress.

Utilizar estos emojis es tan simple como emplear los iconos para WordPress, ya que con solo activarlo en el teclado del dispositivo que esté usando, ya puede comenzar a disfrutar y compartirlos.

Si usted tiene window 10 en su ordenador, solo tiene que pulsar la tecla Window y la tecla del Punto; y de inmediato se desplegará en su pantalla un teclado virtual que contiene todos los emojis que están disponibles.

Si en cambio usted está trabajando con una Mac OS X, entonces debe pulsar Control +⌘+Espacio, y de una manera inmediata podrá contar con su listado de emojis disponibles.

Para el caso de GNU/Linux, va depender de cada distribución; pero si usted usa Ubuntu, allí se encuentra una aplicación para utilizar los emojis de Linux fácilmente. Asimismo existe una opción de copiarlos directamente de la web de Unicode, y sólo tiene que pegarlos en el documento en donde esté trabajando.

Si usted ha explorado un poco el repositorio oficial, podrá haber visto una buena cantidad de plugins para los emojis en WordPress; pero nuestra recomendación es que desista de ello, porque desde que Gutenberg es el editor principal de esta plataforma, ninguno de estos plugin funciona de manera correcta.

Cómo añadir iconos en WordPress a mano

Cuando se dice que se van hacer las cosas de manera manual, las personas se intimidan un poco, pero en el caso de los iconos para WordPress esto resulta un paso realmente sencillo, ya que al tratarse de fuentes, esto resulta similar a cualquier otra biblioteca de imágenes.

Vamos a agregar íconos en el menú de su sitio de WordPress con complementos

Íconos de menú

El primer complemento del que hablaremos se llama Iconos de menú. Esta es una herramienta ampliamente utilizada; hasta la fecha tiene más de 100 mil descargas.

Por el momento, ya está actualizado y es compatible con la versión 4.9 de WordPress; en cualquier caso, siempre es recomendable hacer una copia de seguridad de todo el sitio antes de instalar nuevos complementos.

Una vez instalado, los iconos de menú son muy simples de usar; solo tiene que  navegar dentro de apariencia > menú para abrir la pantalla de configuración de los menús de navegación.

Para cada elemento que haya agregado al menú, verá un enlace llamado “Icono: Seleccionar”, debe hacer  clic en él y seleccionar el icono que desea asociar con ese elemento en particular.

A la derecha, también encontrará algunas opciones adicionales

  • Ocultar etiqueta sí / no; para ocultar el texto y mostrar solo el icono en el menú
  • Posición antes / después; para mostrar el icono antes o después del elemento en el menú
  • Alineación vertical; para determinar la alineación vertical del icono (es decir, alinearlo con el texto o colocarlo más arriba o más abajo)
  • Talla; para determinar qué tan grande debe ser el icono

Cuando haya configurado todas las opciones, haga clic en seleccionar y el icono aparecerá en su menú.

Como puede ver, Menu Icons es una herramienta verdaderamente inmediata y fácil de usar, que le permite insertar iconos personalizados en su menú.

Menú de imagen

El complemento de imagen de menú permite no solo agregar una imagen al menú, sino también agregar una segunda que aparecerá moviendo el cursor del mouse sobre la primera imagen.

Nuevamente, navegue hasta apariencia > menú y seleccione el elemento de menú al que desea agregar el icono. Desde el botón Establecer imagen, seleccione la imagen principal, mientras que con Establecer imagen activada, elija la imagen que se mostrará al pasar el mouse.

Establezca el tamaño del icono, luego decida cómo mostrar el texto; puede ocultarlo o colocarlo encima, debajo, antes o después de la imagen.

Colección AGP Font Awesome

El tercer y último complemento que elaboraremos en este post se llama AGP Font Awesome Collection. Al momento de escribir, el complemento se ha actualizado a WordPress versión 4.8.7. Es una herramienta muy interesante y realmente esperamos que se siga actualizando.

AGP integra íconos de Font Awesome no solo dentro del menú, sino en todas las páginas y publicaciones de su sitio de WordPress.

Cuando activa AGP Font Awesome Collection, aparece un pequeño icono “FA” en las herramientas de su editor visual; y al hacer clic en él, puede configurar e insertar los iconos que desee.

En su lugar, para agregar iconos al menú, haga esto, al igual que en los casos anteriores, navegue hasta apariencia > menú, luego, expanda el cuadro para el elemento de menú individual. Encontrará un menú desplegable llamado “Icono de menú”, y aquí, seleccione el icono que desea insertar.

Como puede ver, esta herramienta AGP Font Awesome Collection también es muy fácil de usar.

Iconos para WordPress gratis: dónde encontrarlos

Si usted necesita una serie de iconos para aplicarla manualmente en su sitio web, le podemos recomendar Socicon, el cual cuenta con 258 iconos de todas las redes sociales, disponibles para que sean utilizadas de inmediato.

De igual manera Socialicious  es otra fuente de iconos que ofrece colores corporativos, y la construcción de botones sociales que resultan muy efectivos para su sitio web.

Mono Social Icons Font es nuestra última pero no menos importante opción, la cual incluye más de cien iconos a su disposición, en las tres conocidas versiones, sobre un cuadrado, sobre un círculo, y sin fondo.

Además de las antes mencionadas, también tenemos otras menos conocidas, pero que igualmente pueden ser muy provechosas para su sitio web, como es el caso de Fontello, que le permite crear su propia galería; Icomoon con sus increíbles cinco mil iconos disponibles para usted, y una aplicación propia que le permite generar fuentes, y Bytesize con los iconos más livianos que pueda conseguir.

Aunado a ello también debemos mencionar Gericons, creados por la empresa que maneja WordPress, Automattic; Elegant Icon Font y Foundation con más de 250 iconos elegantes para un trabajo más especial.

Todos estos son los que de momento le podemos recomendar, pero tenga presente, que también puede emplear como iconos las imágenes PNG o SVG; pero, es necesario contar con un servicio gratuito como es el caso de Iconmonstr, con una estricta licencia en la que se le exige la mención del autor de las misma, como Flaticon o Iconfinder.

Conclusión

Como pudo notar a lo largo de este post, el usar fuentes de iconos para WordPress es una excelente manera de obtener estas imágenes de alta calidad, que le brindan un mejor rendimiento a su página o sitio web.

Hoy vimos tres complementos útiles para agregar iconos al menú de su sitio de WordPress, pero existe un mar de posibilidades para encontrar iconos atractivos, y es por ello que la mayoría de las personas tienen una gran cantidad de ellos instalados; y por lo general, siempre tienen un grupo selecto que es el que más utilizan. Si planeaba agregar este detalle a su sitio, no lo dude. El uso de estas herramientas requerirá unos minutos de trabajo.

El contar con una gran gama de iconos puede traducirse en un problema que afecta la velocidad de carga de su sitio, por ello le recomendamos emplear un servicio de alojamiento rápido y efectivo; así como también, crear su propia biblioteca con algunas de las herramientas que aprendió hoy con nosotros.

Lo más aconsejable en todo caso, es instalar aquellos iconos que sabemos que vamos a utilizar con más frecuencia, y desechar el resto que solo estarán de adorno; porque esta es la única manera que usted le saque el máximo provecho a sus iconos para WordPress.

Si le ha gustado esta lectura, también le podemos recomendar

recursos gráficos

Error al establecer una conexión con la base de datos de WordPress

Elimina los recursos que bloqueen el renderizado

Deja un comentario