985 331 381 · 620 062 376 ···
Font Awesome, facilitando el diseño web

La herramienta Font Awesome, es indispensable a la hora de realizar un diseño web, ya que se trata de una tipografía con 369 caracteres, que en lugar de estar formada con el abecedario, está formada por íconos. Además, cada versión nueva agrega diferentes íconos a la colección.

Lo fundamental de esta herramienta es que entre la variedad de íconos, se puede encuentrar desde los logos de las redes sociales con mayor auge como Facebook, Instagram, Twitter, Linkedin, entre otras, hasta los símbolos que tiene un reproductor de música.

Beneficios para una página web

  • Obtendrás mayor velocidad de carga de la página web. Debes tomar en cuenta que si se utiliza  una imagen para cada icono, al cargar la página web estamos cargando cada una de estas imágenes. Por lo contrario, esto es una tipografía, y el navegador la cargará como si fuera una Arial, o una Times New Roman.
  • Por otro lado, tenemos que tener presente que es una tipografía, y como tal, tiene la propiedad de cambiar de tamaño muy fácilmente, sin perder nitidez.
 Otra propiedad como tipografía, es la facilidad de cambio de color.
  • Font Awesome, se controla con CSS, lo cual proporciona la capacidad de crear muchísimas combinaciones. Sombras, fondos, efectos “hover” con o sin transiciones, aparecer/desaparecer, etc.
  • Al controlar la tipografía con CSS, no tendrás problemas de cambio de tamaño segun dispositivo ni navegador.
  • No requiere Javascript.

¿Cómo se utiliza los íconos?

Existen diversas maneras de implentar los íconos, de forma sencilla. A continuación, veremos una de ellas.

  • Descargar el kit de CSS y Font.
  • Extraer los archivos .css en nuestra carpeta CSS y los archivos de fuente en nuestra carpeta Fonts.
  • Copiar y pegar esta línea de código dentro de la etiqueta <head> de nuestro html, poniendo la ruta correcta al archivo .css que se indica. <link rel=”stylesheet” href=”tucarpeta/css/font-awesome.min.css“>
  • Ver todos los ejemplos que ofrece Font Awesome, en la página oficial.

Es importante, medir las probabilidades de que haya visto Font Awesone, ya que se utiliza en una serie infinita de páginas web. Esta fuente fue diseñada para páginas web, está hecha por completos iconos vectoriales escalables y se ha convertido rápidamente en una de las herramientas más utilizadas en el arsenal del diseñador de páginas web.

Escalable – Los iconos se ven bien sin importar lo que la resolución de pantalla que los convierte en la elección perfecta para el diseño de respuesta.

Estilo CSS – Si usted puede utilizar CSS para el estilo, usted puede aplicarlo a estos iconos.

Compatible – Font Awesome, encuentra sus raíces en Twitter Bootstrap por lo que funciona bien con otros marcos.

Licencia – Font Awesome, es completamente de código abierto GPL y amigable para que pueda ser utilizado en cualquier lugar y sin restricción.

Configuración de Font Awesome

Las Font Awesome son fáciles de configurar en tu sitio web, utilizando un enlace de vuelta a la BootstrapCDN para el CSS o cargando el CSS a tu directorio web. A los efectos de este tutorial, vamos a vincular de nuevo a BootstrapCDN.com. Sin embargo, si desea utilizar cualquiera de los otros métodos para hacer referencia CSS del Font Awesome pueden hacerlo.

Adición de font awesome, sin necesidad de descargar o instalar nada, se realiza mediante la adición de una sola línea de código:

<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font- awesome.min.css” rel=”stylesheet”>

Entre las etiquetas de código HTML <head>. Si está probando a nivel local,  tendrás que cambiar encima de la línea de código para agregar http:

<link ref=”https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font- awesome.min.css” rel=”stylesheet”>

Elaborar el menú

Ahora que tu sitio está listo para los iconos, vamos a seguir adelante y crear un menú de navegación vertical utilizando el siguiente CSS:

.list-group {
margin-bottom: 20px;
padding-left: 0px;
}
* {
box-sizing: border-box;
width:65%
}
.list-group-item:first-child {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
a.list-group-item {
color: #555;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #c3c3c3;
border: 1px solid #000000;
}
a {
color: #21B384;
text-decoration: none;
background: none repeat scroll 0% 0% transparent;
}

La lista de grupos de clase ahora se puede utilizar para crear un menú de navegación vertical básica en lugar de una lista desordenada. El estilo anterior nos da un fondo gris con el texto más oscuro, pero se puede ajustar el color de fondo, color de fuente, o incluso añadir estilo vuelo estacionario hasta el producto terminado.

El menú, sin embargo, está vacío por lo que permite obtener algunos elementos de navegación en no usar HTML. No ponga esto en su página todavía ya que no hemos añadido los iconos en este código.

<div class=”list-group”>

<a class=”list-group-item” href=”#”>Home</a>

<a class=”list-group-item” href=”#”>About Us</a>

<a class=”list-group-item” href=”#”>Search</a>

<a class=”list-group-item” href=”#”>Contact Us</a>

</div>

Los íconos font awesone se pueden añadir en cualquier lugar de tu página utilizando el icono de la etiqueta <i>. Por ejemplo, si desea añadir un icono de lápiz, que tendría que insertar la siguiente línea de código:

<i class=”fa fa-pencil”></i>

Esto le dice al navegador que el icono proviene de font awesome, fa, y que el nombre del icono para mostrar es el lápiz, fa-lápiz. Para nuestro menú, añadiremos el <i> y <i /> etiquetas, junto con un espacio de no separación, directamente ante la opción de menú. Dado que estamos trabajando con los elementos de menú, también vamos a agregar la fa-fw para dar a nuestros iconos un ancho fijo.

<div class=”list-group”>

<a class=”list-group-item” href=”#”><i class=”fa fa-home fa-fw”></i>&nbsp; Home</a>

<a class=”list-group-item” href=”#”><i class=”fa fa-users fa-fw”></i>&nbsp; About Us</a>

<a class=”list-group-item” href=”#”><i class=”fa fa-search fa-fw”></i>&nbsp; Search</a>

<a class=”list-group-item” href=”#”><i class=”fa fa-phone fa-fw”></i>&nbsp; Contact Us</a>

</div>

Hay mucho más que puede hacer con los íconos font awesone directamente en la parte interna de la <i> etiqueta. Puedes hacerlas más grandes, las fronteras se pueden añadir, las imágenes se pueden rotar e incluso se puede decir en el icono para girar.

La página de ejemplos del sitio web font awesome, proporcionan instrucciones sobre cómo aplicar estos estilos en su propia página. Los nuevos iconos se agregan constantemente a la biblioteca para asegurarse de que está utilizando la versión más actualizada de este documento para obtener el máximo provecho de esta herramienta.

Nuestro equipo de Galerna Estudio puede ayudarte a implementar el sistema de Font Awesome en tu sitio web. Somos un equipo de profesionales que nos dedicamos al diseño web en Asturias pero también en toda España. Contacta con nosotros y te ayudaremos en tu proyecto.

¿TE GUSTA EL ARTÍCULO?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas
0 Votos - Promedio: 0,00 de 5
Cargando…
Facebook 0
Google+ 0
Twitter
LinkedIn 0