2MDsJeW
Los internautas acuden a un sitio web para buscar información o realizar una tarea (registrarse, buscar alojamiento, realizar un pago…).
No vienen a navegar por todo el sitio (con algunas excepciones) y quieren encontrar información rápidamente.
Para facilitar la búsqueda y ayudar al usuario de Internet, existen muchas soluciones: priorizar el contenido (con títulos, párrafos, listas…), añadir una navegación o un buscador entre otros.
De esta manera, el usuario puede encontrar lo que busca de un vistazo en la página.
Si tiene que empezar a leer todo para encontrar lo que está buscando, se aburrirá rápidamente y abandonará el sitio.
Los pictogramas también facilitan y agilizan la búsqueda en un sitio web.
En efecto, al ver este o aquel pictograma en una página web, al navegar rápidamente por la página con los ojos, el internauta sabrá muy rápidamente dónde están las cosas que le pueden interesar.
Estos pictogramas están basados en hábitos. Por convención, usted sabrá que detrás de un pictograma, hay tal o cual cosa.
Si estás en una estación de metro y ves esto:
Automáticamente sabrá que en la dirección del pictograma, se dirige a una salida.
Si volvemos a un sitio web y ves este pictograma:
Usted sabe que al hacer clic en el enlace, encontrará algo para contactar con el autor del blog o con la empresa que está detrás del sitio. Dependiendo de sus hábitos, usted espera encontrar un formulario de contacto o una dirección de correo electrónico.
O si ves esto, por ejemplo:
Usted sabe que podrá buscar en el sitio en esta ubicación.
En este tutorial, veremos cómo añadir pictogramas a tu sitio de WordPress. Para ello, descubriremos la biblioteca Font Awesome.
Font Awesome
Font Awesome es una librería que contiene 7020 pictogramas en la versión pro y 1535 en la versión gratuita.
La ventaja de esta librería es que permite añadir imágenes pequeñas directamente, introduciendo etiquetas HTML con clases específicas. Si, por ejemplo, queremos
Simplemente añada la siguiente etiqueta HTML:'< i class=»fab fa-wordpress»>< /i>’ y los pictogramas de Font Awesome se integrarán perfectamente en su flujo de contenido.
Como aquí estamos interesados en WordPress, veremos cómo integrar esta biblioteca en un sitio de WordPress a través de una extensión y cómo añadir pictogramas en el contenido de su sitio.
Impresionante plugin de fuentes para WordPress
La extensión Font Awesome le permite instalar rápidamente la biblioteca Font Awesome sin líneas de código:
Una vez instalada la extensión, puede activarla.
No hay nada más que hacer, podemos empezar a implementar pictogramas.
Integrar Font Awesome en la barra de navegación
Aquí está nuestro menú:
Queremos añadir pictogramas para facilitar el guiar al usuario a través de los diferentes elementos de nuestro menú (y hacerlo más bonito al mismo tiempo).
Nos dirigimos al sitio de Font Awesome, y podemos acceder a los diferentes pictogramas a través de un motor de búsqueda o directamente en la pestaña «Iconos».
Para el elemento’Inicio’ de nuestra barra de navegación, elegiremos una casa pequeña con referencia a la’página principal’.
Así que podemos insertar’home’ en el buscador Font Awesome.
Estoy interesado en esta casita y es la única disponible con la versión gratuita de Font Awesome.
Hago clic en él y llego a esta página. Actualmente para lo que quiero hacer, voy a utilizar la etiqueta HTML a continuación que contiene la clase correspondiente a nuestro pictograma «home».
Simplemente copie esta etiqueta haciendo clic en ella.
Luego vamos a la parte’Menús’ de nuestra administración de WordPress. Para la gestión del menú, si no estás al día, te dejo descubrir este tutorial:
En su menú, pegue la etiqueta HTML en el título de navegación de su elemento. No olvide dejar un espacio entre la etiqueta y el título. Estás grabando.
Esto da esto:
Si continuamos el trabajo, podemos lograr este resultado
Crear un menú de redes sociales
Para mi menú’social’, selecciono’menú secundario’. Las ubicaciones de los menús dependen del tema que haya seleccionado. Aquí estoy en el escaparate.
En mi menú»social», voy a integrar enlaces personalizados que apuntan a las redes sociales. Aquí pongo Facebook como ejemplo y por supuesto en el título de la navegación, ponemos la etiqueta HTML con la clase correspondiente.
Aquí hay un backend con enlaces a Facebook, Twitter e Instagram
y la parte delantera:
y ahora el encabezado de mi tema Storefront:
Integre Font Awesome en un widget
Para este otro ejemplo, queremos crear un pequeño widget que muestre enlaces sobre el autor del blog.
En la sección’Widgets’ de la administración, añadimos un widget de texto en la barra lateral por ejemplo (todavía estamos con el tema Storefront).
y podemos abrir los parámetros de enlace y especificar un primer elemento como este:
y grabas el enlace. A continuación, vaya a la pestaña’Texto’ del editor de su widget y añada la etiqueta HTML correspondiente al pictograma que desee:
y si repetimos la operación varias veces, obtenemos por ejemplo esto en nuestro editor:
y la parte delantera:
Integrar Font Awesome en el contenido de una publicación
También podemos integrar directamente un pictograma en el contenido de una publicación (tipo página, post o post). En el bloque de párrafos, hacemos clic en las opciones (tres pequeños puntos) así y elegimos’Editar en HTML’
e insertamos la etiqueta HTML del pictograma deseado dentro del párrafo (etiquetas «<p>’).
y en la parte delantera da:
Aquí hemos revisado algunas posibilidades para integrar la librería Font Awesome en WordPress.
Ahora depende de ti personalizar tus sitios de WordPress con pictogramas…..
¿Qué es una icont font? (Y cómo funciona)
35bx1PO
Las fuentes Icono o icon font son una solución popular a un problema común de CSS; cómo incorporar iconos web en el diseño de su sitio web de una manera eficiente y rápida.
Las iconfonts están por todo Internet.
Pero, ¿qué es exactamente una icon font? ¿Y cómo los usas? Aquí tienes una guía de todo lo que necesitas saber sobre las icon fonts.
Las icon fonts son tipos de letra que utilizan imágenes diminutas en lugar de formas de letras. Al igual que el tipo, cada carácter es escalable y puede ser modificado usando CSS.
Las razones principales para usar una icon font son que usted puede cambiar el tamaño, el color, la forma, con facilidad.
Las fuentes de los iconos son transparentes por naturaleza, por lo que puede colocarlas en cualquier color o tipo de fondo y puede añadir trazos o cambiar la opacidad de los iconos.
Todo se hace con CSS para que no tenga que crear imágenes únicas para cada nueva instancia de un icono en el diseño. (Esto es genial para mantener su sitio web y código ligero.)
Las icon fonts son imágenes vectoriales, lo que significa que son escalables. Como con cualquier otra fuente, puedes hacerlas tan grandes o pequeñas como quieras.
Utilice icon fonts como elementos de arte o incluso dispersas por otros campos de texto.
La biblioteca más popular y conocida de icon fonts es Font Awesome.
Se utiliza en más de 100 millones de sitios web e incluye una sólida colección de opciones de iconos.
Funciona con todas las herramientas populares, incluyendo Fuentes Web + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React y Ember.
También hay algunos otros conjuntos de iconos de fuentes bastante conocidos.
- Flaticon
- Icofont
- Fontello
- IcoMoon
Ventajas y desventajas del uso de icon fonts
Entonces, ¿por qué usar – o evitar – una icon font? Aquí están algunos de los pros y contras de trabajar con este estilo de elemento de arte.
Ventajas del uso de icon fonts
- Los iconos son fáciles de escalar siempre y cuando existan las clases adecuadas en su CSS
- Puede obtener grandes bibliotecas de iconos con pocos problemas
- Cambiar las propiedades de los iconos es fácil, no importa lo que usó para construir su sitio web
- Es fácil añadir iconos a cualquier página del sitio web (basta con insertar el nombre del icono)
- Hay miles de iconos para elegir en todo tipo de estilos
- Los usuarios de WordPress pueden añadir icon fonts con un simple plugin o copiando el directorio de fuentes en el código (casi cualquier interfaz)
- Puedes crear tu propia icon fonts si necesitas algo súper personalizado
Contras de la utilización de icon fonts
- Los iconos son un solo color o gradiente de color (en la mayoría de los casos); algunos otros paquetes premium están cambiando esto
- No hay una buena alternativa si la fuente del icono no se carga
- Es posible que no necesite un conjunto completo de iconos
- Algunos lectores de pantalla no saben qué hacer con las icon fonts
- Es posible que no encuentre un paquete que se ajuste a sus necesidades
Cómo usar icon fonts en WordPress
Aunque las instrucciones para usar icon fonts pueden variar ligeramente dependiendo del proveedor que elija, la idea básica es la misma.
Generalmente, usted tiene tres opciones (a menos que planee hacer un poco más de codificación dura usted mismo):
- Usa un plugin que lo instala todo para que sólo tengas que llamar a los iconos que quieras usar. (Super fácil!)
- Utilice los iconos de fuente incorporados de su CMS o constructor de sitio web. Esto funciona muy bien si no tienes un sitio personalizado o necesitas/quieres un tipo específico de icono de fuente. La mayoría de los creadores de sitios web vienen con algo»fuera de la caja»
- Enlace manual a una icon fonts alojada externamente. (La versión más complicada de usar un plugin.)
Icon fonts vs SVG fonts
El debate más grande está cambiando a si usted debería (o querría) usar una icon font versus imágenes SVG con el propósito de insertar pequeñas imágenes en su sitio web.
Ambas opciones son igualmente viables y tienen mucho que ver con las preferencias personales.
Un archivo SVG (formato vectorial escalable) puede darle un poco más de flexibilidad en el diseño.
(Usted no está limitado a un solo color). Los archivos pequeños y escalables se pueden subir directamente a su directorio de medios y son fáciles de usar. Esta es una buena opción si sólo necesitas un puñado de iconos y no quieres tratar con una biblioteca.
Los SVGs son más flexibles con la posibilidad de añadir más colores y animaciones.
Las icon fonts pueden ser más rápidas de cargar a largo plazo porque están almacenadas en caché. Pero la diferencia puede ser mínima.
La colocación de las fuentes de los iconos puede resultar un poco complicada, ya que están sujetas a las reglas típicas de las fuentes, como el tamaño, el espaciado entre líneas y las alineaciones verticales.
Esta es la única razón por la que la mayoría de las personas que utilizan una icon font, optan por un proveedor establecido en lugar de tratar de hacer la suya propia.
Los SVG pueden incluir elementos alt que los hacen más accesibles que las icon fonts, que pueden parecer caracteres de letras para los lectores de pantalla.
Las icon fonts son generalmente más fáciles de encontrar y usar para la mayoría de las personas.
Las bibliotecas están generalmente disponibles y no son difíciles de entender. Los iconos SVG son los preferidos por los usuarios que desean más control de diseño y opciones de personalización.
Ambas opciones son de uso común y funcionan bien en la mayoría de los casos.
Elegir uno tiene mucho que ver con lo que más le gusta y con lo que más se ajusta a su diseño estético y a la interfaz de usuario.
Conclusión
Una de las razones por las que las icon fonts son tan populares es que son versátiles y fáciles de usar.
Gracias a un formato escalable que se puede instalar con un par de clics en la mayoría de los sistemas de gestión de contenidos, casi todo el mundo puede empezar a utilizar icon fonts rápidamente.
El beneficio real de una icon font es que el elemento utiliza CSS, y no es un archivo de imagen independiente. Esto es bueno para crear un sitio web lean con elementos que se cargan rápidamente y en un formato vectorial (genial si necesita cambiar el tamaño más tarde).