Cargando

Ir a contenido


 


Utilizar Font Icons en nuestros sitios web

Existen bibliotecas de iconos en formato fuente que permiten tener iconos vectoriales y escalables que al instante se pueden personalizar mediante CSS.


Escrito por el mar 31 2016 20:26 css


Los desarrolladores web estan muy acostumbrados a utilizar iconos para representar una acción específica o el icono puede representar en forma grafica cualquier comando o acción o un indicador en una página web. Los iconos se utilizan en documentos, así como las aplicaciones y pueden ser ya sea seleccionable o no seleccionable.

 

Por ejemplo, las imágenes que vemos en los botones de una aplicación son todos los iconos y estos botones se pueden seleccionar.

 

Para facilitar el diseño y programación de sitios web se han desarrollado algunas bibliotecas de icono de fuentes, es decir iconos que se pueden insertar como si fuera texto y están disponibles para ser utilizadas en las páginas HTML de un sitio web, ahorrando mucho trabajo a los diseñadores y programadores.

 

En este tutorial veremos algunas bibliotecas como Font Awesome, Bootstrap Glyphicons, y Material Design Google que son bibliotecas con fuentes de iconos preestablecidos de uso frecuente por los desarrolladores web.

 

Herramientas y Biblioteca de Font Awesome

Font Awesome es una biblioteca de fuentes que representa iconos mediante un conjunto de herramientas basadas en CSS. Esta herramienta se desarrolla para utilizar con Twitter Bootstrap pero se puede utilizar en forma individual como hojas de estilo en cualquier sitio web.

 

La ventaja de ser una biblioteca CSS es que funciona en cualquier navegador y dispositivo e incluso se adapta a cualquier resolución de pantalla.

 

Puedes descargar la biblioteca de la web de Font Awesome. Otra opción es utilizar el enlace directo a la librería:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Veamos un ejemplo de como implementar iconos para redes sociales con Font Awesome, creamos un archivo html y le añadimos el siguiente código:
<html>
<head>
<title>Font Awesome - Iconos de redes Sociales</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

</head>
<body>
<h1>Font Awesome - Iconos de redes Sociales</h1>
   <div class="wrapper">
 
  <!-- Aplicamos algunas clases al listado
    tipo de icono: social-icons
   
    -->
	 <ul class="social-icons icon-circle list-unstyled list-inline">
	   <li><a href="#"><i class="fa fa-android"></i></a> </li>  
	   <li> <a href="#"><i class="fa fa-apple"></i></a> </li>
	   <li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li>
	   <li> <a href="#"><i class="fa fa-css3"></i></a> </li>
	   <li> <a href="#"><i class="fa fa-dropbox"></i></a></li>
	   <li> <a href="#"><i class="fa fa-facebook"></i></a></li>
	   <li> <a href="#"><i class="fa fa-facebook-square"></i></a></li>
	   <li> <a href="#"><i class="fa fa-google-plus"></i></a></li>
	   <li> <a href="#"><i class="fa fa-google-plus-square"></i></a></li>
	   <li> <a href="#"><i class="fa fa-html5"></i></a></li>
	   <li> <a href="#"><i class="fa fa-instagram"></i></a></li>
	   <li> <a href="#"><i class="fa fa-linkedin"></i></a></li>
	   <li> <a href="#"><i class="fa fa-linkedin-square"></i></a></li>
	   <li> <a href="#"><i class="fa fa-linux"></i></a></li>
	   <li> <a href="#"><i class="fa fa-pinterest"></i></a></li>
	   <li> <a href="#"><i class="fa fa-pinterest-square"></i></a></li>
	   <li> <a href="#"><i class="fa fa-skype"></i></a></li>
	   <li> <a href="#"><i class="fa fa-trello"></i></a></li>
	   <li> <a href="#"><i class="fa fa-tumblr"></i></a></li>
	   <li> <a href="#"><i class="fa fa-tumblr-square"></i></a></li>
	   <li> <a href="#"><i class="fa fa-twitter"></i></a></li>
	   <li> <a href="#"><i class="fa fa-twitter-square"></i></a></li>
	   <li> <a href="#"><i class="fa fa-vimeo-square"></i></a></li>
	   <li> <a href="#"><i class="fa fa-windows"></i></a></li>
	   <li> <a href="#"><i class="fa fa-youtube"></i></a></li>
	   <li> <a href="#"><i class="fa fa-youtube-play"></i></a></li>
	   <li> <a href="#"><i class="fa fa-youtube-square"></i></a></li>
    </ul>
   

</div>
</html>
</body>
Codigo html ej

 

Cada icono está representado por una clase fa-icono así por ejemplo el icono para YouTube será fa-youtube, el resultado al mostrar en el navegador sera el siguiente:

 

 

A continuación podremos añadir nuestras propias clases CSS o modificar la predefinidas para adaptar a nuestro diseño, por ejemplo entre las etiquetas head añadimos el siguiente código CSS.

<style>
body {
background: #000;
font-family: 'Arial', sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #fff;
background: rgba(0, 0, 0, 0.36);
margin: 0;
padding: 5px;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.list-inline li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-bottom: 10px;
}

/*Cambio el tamaño de letra o fuente*/
.social-icons .fa {
font-size: 2em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.social-icons.icon-circle .fa{
border-radius: 50%;
}
.social-icons.icon-rounded .fa{
border-radius:5px;
}
.social-icons.icon-flat .fa{
border-radius: 0;
}
.social-icons .fa:hover, .social-icons .fa:active {
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
  -webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg);
}

.social-icons .fa-apple{background-color:#aeb5c5;}
.social-icons .fa-android{background-color:#A5C63B;} 
.social-icons .fa-bitcoin{background-color:#F7931A;}
.social-icons .fa-css3{background-color:#1572B7;}
.social-icons .fa-dropbox{background-color:#018BD3;}
.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;} 
.social-icons .fa-github,.social-icons .fa-github-alt,.social-icons .fa-github-square{background-color:#070709;}
.social-icons .fa-google-plus,.social-icons .fa-google-plus-square{background-color:#CF3D2E;}
.social-icons .fa-html5{background-color:#E54D26;}
.social-icons .fa-instagram{background-color:#A1755C;}
.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#0085AE;}
.social-icons .fa-linux{background-color:#FBC002;color:#333;}
.social-icons .fa-maxcdn{background-color:#F6AE1C;}
.social-icons .fa-pagelines{background-color:#241E20;color:#3984EA;}
.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#CC2127;}
.social-icons .fa-renren{background-color:#025DAC;}
.social-icons .fa-skype{background-color:#01AEF2;}
.social-icons .fa-stack-exchange{background-color:#245590;}
.social-icons .fa-stack-overflow{background-color:#FF7300;}
.social-icons .fa-trello{background-color:#265A7F;}
.social-icons .fa-tumblr,.social-icons .fa-tumblr-square{background-color:#314E6C;}
.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#32CCFE;}
.social-icons .fa-vimeo-square{background-color:#229ACC;}
.social-icons .fa-vk{background-color:#375474;}
.social-icons .fa-weibo{background-color:#D72B2B;}
.social-icons .fa-windows{background-color:#12B6F3;}
.social-icons .fa-xing,.social-icons .fa-xing-square{background-color:#00555C;}
.social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square{background-color:#C52F30;}
</style>
Decoración de los iconos vía CSS

 

A continuación ejecutamos en el navegador y el resultado será el siguiente:

 

 

Podemos observar que hemos aplicado CSS a cada icono y no hemos añadido ninguna imagen. Otra opción para mejorar la visibilidad es cambiar la clase hover, es decir cuando el mouse se pose sobre un icono cambiar el color de la letra.

 

Para ello cambiamos en la siguiente linea el color:

.social-icons .fa:hover {
color: green;
}
El resultado al pasar el mouse por un icono será el siguiente:

 

 

También podemos hacerlo con el fondo de cada icono, cambiando la propiedad background por un color que nos guste.
Todos los iconos disponibles podemos verlos en la web de Font Awesome, los iconos están organizados por categorías.

 

Utilizar este tipo de fuente de iconos para nuestros diseño web, nos permite agilizar la carga de la página ya que no necesitamos imágenes y ofrecen una calidad superior (sobre todo en dispositivos mobile al realizar zoom)

 

Herramientas y Biblioteca de Glyphicons Bootstrap

Glyphicons Bootstrap es una biblioteca de iconos tipo fuente. Ofrece una gran variedad de iconos en formato de fuente. Estos iconos son libres y también se puede extender la biblioteca con iconos de pago. Los iconos gratuitos se pueden utilizar en proyectos basados ​​en diseño web sin tener que comprarlos. Esta biblioteca está orientada a iconos para botones que ejecutan algún función como imprimir, buscar, guardar, etc.

 

Esta biblioteca viene incluida como hojas de estilo dentro de Bootstrap, para utilizarla podemos descargar Bootstrap desde su página oficial o utilizar el siguiente enlace:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
También podemos ver los iconos por categorías en la página de Glyphicons.

 

A continuación veamos un ejemplo utilizamos esta biblioteca para iconos para botones y elementos de entrada de datos para un formulario:

<html >
<head>
  <title>Glyphicon Bootstrap - Botones</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body>

<div class="container">
  <h2>Glyphicon Bootstrap - Botones</h2>
  <button type="button" class="btn btn-info">
	  <span class="glyphicon glyphicon-search"></span> Buscar </span>
    </button>
  <button type="button" class="btn btn-info">
	  <span class="glyphicon glyphicon-print"></span> Imprimir </span>
    </button>
  <button type="button" class="btn btn-info">
	  <span class="glyphicon glyphicon-lock"></span> Login </span>
    </button>
  <button type="button" class="btn btn-info">
	  <span class="glyphicon glyphicon-cart-in"></span> Comprar </span>
    </button>
<br><br>
<div class="input-group">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-envelope"></span>
  </span>
  <input class="form-control" type="text" name="email" placeholder="Email">
</div>

<div class="input-group">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-lock"></span>
  </span>
  <input class="form-control" type="password" name="clave"  placeholder="Clave">
</div>
<br><br>
<p>Aplicamos el icono lista a un select</p>
<div class="input-group">
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-th-list"></span>
  </span>
  <select class="form-control">
   <option>Automoviles</option>
   <option>Motos</option>
   </select>
</div>
</div>
</body>
</html>
Probamos en un dispositivo móvil como quedaría:

 

 

Las ventajas de utilizar font icons o iconos fuente es que se ahorra tener que invocar una imagen o icono ya que las imágenes están en formato svg en el archivo css de la biblioteca y esta imagenes son escalables.

 

Una biblioteca completa puede pesar entre 10Kb y 40Kb, por lo que incrementa la velocidad de carga del sitio web.
Los iconos son texto por lo tanto podemos manipularlos con CSS y responderá a cualquier evento que programemos con Jquery.

 

Si en la propiedad CSS Font indicamos un tamaño de letra en em por ejemplo, font-size:4em el icono será responsive y se adaptara a cualquier dispositivo. Además pueden utilizar para programar aplicaciones responsive con frameworks como se ve en el tutorial programación de aplicaciones móviles con Ionic Framework, también se utilizan estos iconos.

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
9.6
VOTA
5
80%
4
20%
3
0%
2
0%
1
0%

  Información

  •   Publicado mar 31 2016 20:26
  •   Actualizado abr 02 2016 10:07
  •   Visitas 2.6K
  •   Nivel
    Avanzado



Tutoriales Relacionados


2 Comentarios


Fiore Nella
abr 05 2016 12:50

Esto es un tutorial demandado. Pero tengo una pregunta Sergio. ¿Si quiero poner en Font Icons todos? Tengo que poner de uno en uno los links.. ¿No hay una linea que incluya todos los tipos de iconos? Lo digo para no tener que ir poniendo links sueltos.

 

gracias!

A mi también me ha gustado Sergio.

 

Esto es un tutorial demandado. Pero tengo una pregunta Sergio. ¿Si quiero poner en Font Icons todos? Tengo que poner de uno en uno los links.. ¿No hay una linea que incluya todos los tipos de iconos? Lo digo para no tener que ir poniendo links sueltos.

 

gracias!

 

Para lo que comentas Fiore, se puede cargar en todas tus páginas web todos los iconos, sería añadiendo esta línea ;)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

+info: https://www.bootstra...om/fontawesome/

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse