Las icon-fonts son archivos de fuentes tipograficas especiales que contienen caracteres en forma de íconos visuales, de esta forma podemos insertar estas tipografias en lugar de insertar imagenes, lo que supone un ahorro de carga considerable, como son gráficos vectoriales nos ahorramos ademas el problema de que se pixelen en dispositivos de pantalla grande.
Para usar estas fuentes en un documento web, debemos invocarlo a través de la propiedad @font-face de CSS3 como invocariamos caualquier otra fuente o especificandolos desde una subclase con los pseudoelementos :after y :before.
Las icon-fonts nos permiten ademas cambiar el color, cambiar el tamaño, insertar sombras o cualquier otra propiedad de texto de la que disponga CSS.
Para mostrar un ejemplo de código vamos a recurrir a We Love Icon Fonts, esta web es un servicio de alojamiento remoto, nos proporciona una buena colección de icon-fonts sin necesidad de descargarlas.
Ejemplo
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Didesweb</title>
<style type="text/css">
@import url(https://weloveiconfonts.com/api/?family=zocial);
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
.zocial-android {
font-size: 25px;
color: green;
}
.zocial-html5 {
font-size: 30px;
color: orange;
}
.zocial-pinboard {
font-size: 35px;
color: blue;
}
.zocial-guest {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<span class="zocial-android"></span>
<span class="zocial-html5"></span>
<span class="zocial-pinboard"></span>
<span class="zocial-guest"></span>
</body>
</html>Si queremos descargar un paquete completo podemos recurrir a cualquiera de los siguientes sitios web:
En cada uno de los sitios puedes encontrar documentación y ejemplos de implementación que pueden ser diferentes en cada caso, habiendo visto como utilizar este tipo de tipografia de modo “remoto” como en el caso de We Love Icon Fonts, vamos ahora a centrarnos en Font Awesome para mostrar un ejemplo de su uso descargando los archivos necesarios para utilizarlos en nuestro proyecto
Font Awesome
Font Awesome es un proyecto Open Source por lo que puede ser utilizado para cualquier tipo de proyecto abierto o comercial, nos dirigimos a la web oficial del proyecto y nos descargamos el paquete en “Download”, el paquete se compone de 4 carpetas (css,fonts,less,scss).
Las carpetas que nos interesan en este momento son css y fonts, creamos un archivo html y lo enlazamos con la hoja de estilos
<link type="text/css" rel="stylesheet" href="css/font-awesome.css"/>Tambien podemos añadirlo mediante un CDN
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">La hoja de estilos
Si nos fijamos en el archivo CSS encontramos que ya viene todo practicamente hecho, con @font-face está definida la familia de la fuente y enlazada en su correspondiente carpeta, tambien se incluyen varias clases, (.fa-lg, .fa-2x, .fa-3x …) para definir distintos tamaños, ( .fa-ul y .fa-li) para definir los iconos en forma de lista y muchas otras clases para definir el enmarcado, animaciones y rotacion entre otras opciones.
Por lo tanto lo unico que debemos tener en cuenta es que debemos insertar explicitamente las tipografias en una etiqueta <i>.
Ejemplo
<i class="fa fa-home"></i>
Tamaños
Para aumentar el tamaño de los iconos usamos las clases fa-lg, fa-2x, fa-3x …
<i class="fa fa-share-alt fa-lg"></i>
<i class="fa fa-css3 fa-2x"></i>
<i class="fa fa-github-alt fa-3x"></i>
<i class="fa fa-facebook fa-4x"></i>
<i class="fa fa-cc-mastercard fa-5x"></i>
Listas
Font Awesome tambien nos ofrece clases en su hoja de estilos para mostrar las tipografias como listas
<ul class="fa-ul">
<li><i class="fa-li fa fa-home"></i>Home</li>
<li><i class="fa-li fa fa-user"></i>Contact</li>
<li><i class="fa-li fa fa-shopping-cart"></i>Buy</li>
<li><i class="fa-li fa fa-wheelchair"></i>Accessibility</li>
</ul>- Home
- Contact
- Buy
- Accessibility
Animaciones
Con las clases fa-spin y fa-pulse podemos animar las tipografias
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-pulse"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
Rotaciones
Con las clases fa-rotate- y fa-flip- podemos rotar las tipografias
<i class="fa fa-navicon fa-flip-horizontal"></i>
<i class="fa fa-navicon fa-rotate-90"></i>
<i class="fa fa-navicon fa-rotate-270"></i>
<i class="fa fa-navicon fa-flip-vertical"></i>
Y ademas de todo esto podemos añadir como ya dijimos al principio de este articulo cualquier propiedad de texto de la que disponga CSS
HOME
Contact
SHOPPING
Espero que os haya servido de ayuda como introducción para empezar a darle forma a esta caracteristica con CSS
Valoraciones
Sé el primero en valorar