Poner link a un font 
CODIGO HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Blog Prospera</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="index_style.css">
<link rel="stylesheet" href="fonts.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="main.js"></script>
</head>
<body>
<header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-dehaze"></span>Menu</a>
</div>
<nav>
<ul>
<div class="contenedor" id="uno">
<span class="icon icon-blogger2"></span>
<p class="texto">Blog</p>
</div>
<div class="contenedor" id="dos">
<span class="icon icon-bubbles2"></span>
<p class="texto">Foro de discusion</p>
</div>
<div class="contenedor" id="tres">
<span class="icon icon-users"></span>
<p class="texto">Sala de chat</p>
</div>
<div class="contenedor" id="cuatro">
<span class="icon icon-clipboard"></span>
<p class="texto">Evaluaciones</p>
</div>
<div class="contenedor" id="cinco">
<span class="icon icon-books"></span>
<p class="texto">Biblioteca</p>
</div>
<div class="contenedor" id="seis">
<li class="submenu">
<span class="icon icon-film"></span>
<p class="texto">Multimedia<span class="caret icon-keyboard_arrow_down"></span></p>
<ul class="children">
<span class="icon icon-video-camera"></span>
<p class="texto">Video</p></li>
<span class="icon icon-images"></span>
<p class="texto">Fotos</p></li>
</ul>
</li>
</div>
<div class="contenedor" id="siete">
<span class="icon icon-profile"></span>
<p class="texto">Contacto</p>
</div>
</header>
</body>
</html>
CODIGO CSS:
* {
padding:0;
margin:0;
font-family:Soberana Sans;
}
.menu_bar {
display:none;
}
header {
width: 100%;
}
body {background:#FFFFFF;
}
header{
margin: 10px auto;
margin-top: 150px;
width: 1000px;
height: 78px;
background-color: #1C1C1C;
}
div.contenedor{
width: 142.8px;
height: 79px;
float: left;
-webkit-transition: height .4s;
}
header nav ul {
list-style:none;
}
header nav ul li {
position: relative;
}
header nav ul li:hover {
background:#383232;
width: 142.7px;
line-height: 19pt;
}
p { line-height: 1.2; font-size: 1em }
div#uno{
background-color: #2E2929;
}
div#dos{
background-color: #383232;
}
div#tres{
background-color: #2E2929;
}
div#cuatro{
background-color: #383232;
}
div#cinco{
background-color: #2E2929;
}
div#seis{
background-color: #383232;
}
div#siete{
background-color: #2E2929;
}
p.texto {
color:#fff;
display:block;
font-size: 10pt;
text-align: center;
text-decoration:none;
padding-top: 10px;
opacity: .6;
-webkit-transition: padding-top .7s;
}
span.icon {
font-size: 15pt;
}
span.icon {
display: block;
color: white;
margin: 5px auto;
text-align: center;
background-color: rgba(255,255,255,.1);
width: 20px;
padding: 20px;
-webkit-border-radius: 70%;
-webkit-box-shadow:0px 0px 0px 35px rgba(255,255,255,0);
-webkit-transition:box-shadow .7s;
}
div.contenedor:hover{
height: 120px;
}
div.contenedor:hover p.texto{
padding-top: 30px;
opacity: 1;
}
div.contenedor:hover span.icon {
-webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,.7)
}
CODIGO JS:
$(document).ready(main);
var contador = 1;
function main () {
$('.menu_bar').click(function(){
if (contador == 1) {
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}
});
// Mostramos y ocultamos submenus
$('.submenu').click(function(){
$(this).children('.children').slideToggle();
});
}
AYUDA!
