Diseño de interfaz de usuario: formas sencillas de agregar iconos de navegación móvil

En la actualidad, más personas navegan por Internet a través de dispositivos móviles, por lo que algunas cosas en los sitios web deben ajustarse para adaptarse a esos tamaños de pantalla más pequeños. Esto también incluye la navegación web .

El icono de abajo, si puede, es el icono más popular para representar el “menú / navegación móvil”.

En esta publicación, veremos varias formas de agregar el ícono y cuál es la más fácil.

Usar imagen de mapa de bits

Todo el mundo sabe cómo hacerlo mediante la imagen de mapa de bits. Simplemente podemos crear este icono en Photoshop, guardarlo en una imagen (probablemente en formato PNG o JPG) y luego asignarlo background-imageen CSS.

Sin embargo, las imágenes de mapa de bits carecen de escalabilidad. En particular, cuando tenemos que ampliar la imagen, puede que se vuelva borrosa o pixelada. Con la disponibilidad de dispositivos de alta resolución en el mercado en estos días, la escalabilidad de la imagen es un factor esencial que no puede permitirse pasar por alto.

Bootstrap Way

Así es como Bootstrap , un marco de desarrollo de front-end, muestra el “icono de navegación” en tamaños de pantalla más pequeños. Utiliza tres <span>elementos:

12345<button type=”button” class=”btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>    <span class=”icon-bar”></span>    <span class=”icon-bar”></span>    <span class=”icon-bar”></span></button>

Aunque el icono deseado se puede lograr mediante el estilo, tener un marcado adicional para mostrar solo este pequeño icono se considera redundante (especialmente si cumplimos con las “mejores prácticas” ).

Entonces, busquemos una mejor manera que requiera menos marcado.

Usando el icono de fuente

Otra forma de hacerlo es mediante el uso de iconos de fuentes. Varias fuentes proporcionan este icono en su conjunto, como Font Awesome y EnTypo . Para mostrar el icono, simplemente agregamos el carácter respectivo, como se muestra en esta publicación .

Algunas de las ventajas de mostrar íconos con fuentes son que el ícono es fácil de alterar a través de CSS y es independiente de la resolución. Por otro lado, también tiene algunas desventajas: el archivo puede ser muy grande dependiendo de cuántos caracteres se guarden, y necesitamos al menos cuatro formatos de archivo diferentes para cubrir la compatibilidad del navegador, lo cual es mucho trabajo para mostrar un solo icono.

“Trigram for Heaven”

Sorprendentemente, hay un carácter HTML llamado Trigram for Heaven . Esta es (probablemente) la mejor manera que puedo encontrar. Simplemente coloque este carácter HTML ( ☰) y debería obtener este icono en su página web.

Luego podemos alterarlo con CSS, como cambiar el color o redimensionarlo sin perder la nitidez y también vincularlo a fuentes externas. Además, puede sumergirse en esta biblioteca para encontrar más caracteres especiales HTML.

Deja un comentario