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.
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)
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.
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!